The HTML DOM style userSelect property returns and modify whether the text of an element can be selected by the user or not in an HTML document.
Syntax
Following is the syntax −
Returning userSelect
object.style.userSelect
Modifying userSelect
object.style.userSelect = “value”
Values
Here, value can be −
| Value | Explanation |
|---|---|
| auto | It allows user to select text according to browser setting. |
| none | It doesn’t allow user to select text. |
| text | In it the text can be selected by the user. |
| all | It allows text selection with single click instead of double click. |
Example
Let us see an example of HTML DOM style userSelect property −
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
.show {
margin: 1rem 0;
}
</style>
</head>
<body>
<h1>DOM Style userSelect Property Example</h1>
<p style="direction:ltr">This is a paragraph element with some dummy text.</p>
<button onclick="add()" class="btn">Set userSelect</button>
<div class="show"></div>
<script>
function add() {
document.querySelector('p').style.userSelect = "none";
document.querySelector('.show').innerHTML = "Now you can't select the above paragraph text";
}
</script>
</body>
</html>Output
This will produce the following output −
Click on “Set userSelect” button to set userSelect with none as value on paragraph element.
