Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style userSelect Property
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.
Updated on: 01-Jul-2020
31 Views
Advertisements