HTML | DOM Style userSelect Property
The DOM Style UserSelect Property is used to set or return whether the text can be selected by the user or not.
Syntax:
- It is used to return the property:
object.style.userSelect
- It is used to set the property:
object.style.userSelect = "auto|none|text|all"
Properties :
- auto: It has the default value i.e. the user can select the text.
- none: It is used to prevent text selection from the user means user can’t select the text on its own.
- text: This property enable the user to select the text. It does not provide prevent text selection from the user.
- all: It is used to selected the text with just one-click of a mouse instead of a double-click.
Return Values: It returns a string value which represents whether the text of an element can be selected.
Example-1:
html
<!DOCTYPE html><html><head> <title> DOM Style user-select property</title> <style> div { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } h1, h3 { color: green; font-size: 30px; } body { text-align: center; } </style></head><body> <h1>GeeksforGeeks</h1> <h3>DOM Style UserSelect Property</h3> <div id="GFG">GeeksforGeeks: A computer science portal for geeks</div> <br> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { var x = document.getElementById("GFG"); // Chrome, Safari, Opera x.style.WebkitUserSelect = "none"; // Firefox x.style.MozUserSelect = "none"; // IE 10+ x.style.msUserSelect = "none"; // Standard syntax x.style.userSelect = "none"; } </script></body></html> |
Output :
- Before Clicking On Button:
- After Clicking On Button:
Example-2:
html
<!DOCTYPE html><html><head> <title> DOM Style user-select property</title> <style> h1, h3 { color: green; font-size: 30px; } body { text-align: center; } </style></head><body> <h1>GeeksforGeeks</h1> <h3>DOM Style UserSelect Property</h3> <div id="GFG" style="user-select:auto;"> GeeksforGeeks: A computer science portal for geeks </div> <br> <button onclick="myGeeks()">Submit</button> <script> function myGeeks() { alert(document.getElementById( "GFG").style.userSelect); } </script></body></html> |
Output:
- Before Clicking On Button:
- After Clicking On Button:
Note: The double-click on some text will be selected/highlighted but this property can be used to prevent this.
Supported Browser: The browser supported by DOM Style UserSelect are listed below:
- Google Chrome 54 and above
- Edge 79 and above
- Internet Explorer 10 and above
- Firefox 69 and above
- Opera 41 and above
- Safari 3 and above
Please Login to comment...