Thuộc tính HTML DOM style userSelect trả về và sửa đổi xem người dùng có thể chọn văn bản của một phần tử trong tài liệu HTML hay không.
Cú pháp
Sau đây là cú pháp -
-
Người dùng quay lại Chọn
object.style.userSelect
-
Sửa đổi người dùng Chọn
object.style.userSelect = “value”
Giá trị
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| auto | Nó cho phép người dùng chọn văn bản theo cài đặt trình duyệt. |
| không có | Nó không cho phép người dùng chọn văn bản. |
| văn bản | Trong đó, người dùng có thể chọn văn bản. |
| tất cả | Nó cho phép chọn văn bản bằng một cú nhấp chuột thay vì nhấp đúp. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính kiểu DOM HTML userSelect -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Đặt userSelect ”Để đặt userSelect không có giá trị nào trên phần tử đoạn.
