Style userSelect 属性 详解
css3基础 2023-07-30 03:50:02小码哥的IT人生shichen
Style userSelect 属性
定义和用法
userSelect 属性设置或返回是否可以选择元素的文本。
如果您双击某些文本，它将被选中/突出显示。此属性可用于防止这种情况。
另请参阅：
CSS 参考手册：user-select 属性
实例
例子 1
防止 <div> 元素的文本选择：
document.getElementById("myDiv").style.userSelect = "none";
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<p>点击“试一试”按钮，将 p 元素的 user-select 属性设置为 “none”：</p>
<button onclick="myFunction()">试一试</button>
<p id="demo">您点击按钮后，无法选中这个 p 元素的文本（请前后双击试试）。</p>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.WebkitUserSelect = "none"; // Safari
x.style.msUserSelect = "none"; // IE 10 和 IE11
x.style.userSelect = "none"; // 标准语法
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 2
获取元素的 "user-select" 属性的值：
document.getElementById("demo").style.userSelect;
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<p>点击该按钮可获取下方 p 元素的 “user-select” 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo" style="user-select:none">无法选择此文本。</p>
<script>
function myFunction() {
alert(document.getElementById("demo").style.userSelect);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
返回 userSelect 属性：
object.style.userSelect
设置 userSelect 属性：
object.style.userSelect = "auto|none|text|all"
属性值
| 值 | 描述 |
|---|---|
| auto | 默认。可根据浏览器默认设置对文本进行选取。 |
| none | 防止文本选取。 |
| text | 文本可由用户选取。 |
| all | 通过单击而非双击进行文本选取。 |
技术细节
| 默认值： | auto |
|---|---|
| 返回值： | 字符串，表示元素的文本是否可以被选取。 |
| CSS 版本： | CSS3 |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
数字后跟 Webkit、Moz 或 O 指定使用前缀的首个版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 54.0 | 79.0 10.0 ms |
69.0 | 3.1 Webkit | 41.0 |
