HTML

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:

<!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>w3wiki</h1>
    <h3>DOM Style UserSelect Property</h3>
    <div id="GFG">w3wiki:
      A computer science portal for Beginner</div>
    <br>
   
    <button onclick="myBeginner()">Submit</button>
   
    <script>
        function myBeginner() {
            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>w3wiki</h1>
    <h3>DOM Style UserSelect Property</h3>
    <div id="GFG" style="user-select:auto;">
        w3wiki: A computer science portal for Beginner
    </div>
    <br>
 
    <button onclick="myBeginner()">Submit</button>
    <script>
        function myBeginner() {
            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

HTML | DOM Style userSelect Property

html

html

Contact Us