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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。