HTML - DOM Style Object userSelect Property

Quiz

HTML DOM Style Object userSelect property sets or returns whether the text can be selected by the user or not.

Syntax

Set the userSelect property:

object.style.userSelect= "auto | none | text | all";

Get the userSelect property:

object.style.userSelect;

Property Values

Value	Description
auto	It is the default value where user can select the text.
none	It does not user to select the text.
text	It allows user to select the text.
all	It allows user to select the text of element with a single click.

Return Value

It returns a string value which represents whether text of an element can be selected.

Example of HTML DOM Style Object 'userSelect' Property

The following example illustrates userSelect property values on div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object userSelect Property
    </title>
</head>
<body>
    <p>
        Try selecting the text after clicking 
        on each button.   
    </p>
    <button onclick="fun()">None</button>
    <button onclick="funTwo()">Text</button>
    <button onclick="funThree()">All</button>
    <br><br>
    <div id="select">
        Welcome to Tutorials Point.
    </div>
    <script>
        function fun() {
            document.getElementById("select")
                .style.userSelect = "none";
        }
        function funTwo() {
            document.getElementById("select")
                .style.userSelect = "text";
        }
        function funThree() {
            document.getElementById("select")
                .style.userSelect = "all";
        }
    </script>
</body>
</html>

Supported Browsers

Property
userSelect	Yes 54	Yes 79	Yes 69	Yes 3	Yes 41

html_dom.htm

Print Page