HTML Style userSelect用法及代码示例

DOM样式UserSelect属性用于设置或返回用户是否可以选择文本。

用法:

它用于返回属性：
```
object.style.userSelect
```

它用于设置属性：

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

属性：

汽车：它具有默认值，即用户可以选择文本。
没有：它用于防止用户选择文本，这意味着用户无法自行选择文本。
文本：此属性使用户可以选择文本。它不提供阻止用户选择文本的函数。
所有：它用于仅单击鼠标一次而不是双击来选择文本。

返回值：它返回一个字符串值，该字符串值表示是否可以选择元素的文本。

示例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>GeeksforGeeks</h1> 
    <h3>DOM Style UserSelect Property</h3> 
    <div id="GFG">GeeksforGeeks:
      A computer science portal for geeks</div> 
    <br> 
    
    <button onclick="myGeeks()">Submit</button> 
    
    <script> 
        function myGeeks() { 
            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>

输出：

在点击Buttton之前：
单击按钮后：

示例2：

<!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>GeeksforGeeks</h1> 
    <h3>DOM Style UserSelect Property</h3> 
    <div id="GFG" style="user-select:auto;"> 
        GeeksforGeeks:A computer science portal for geeks 
    </div> 
    <br> 
  
    <button onclick="myGeeks()">Submit</button> 
    <script> 
        function myGeeks() { 
            alert(document.getElementById( 
              "GFG").style.userSelect); 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

注意：双击某些文本将被选中/突出显示，但是可以使用此属性来防止这种情况。

支持的浏览器：下面列出了DOM Style UserSelect支持的浏览器：

谷歌浏览器
IE浏览器
Firefox
Opera
Safari

相关用法

注：本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML | DOM Style userSelect Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。