HTML Style cursor用法及代碼示例

HTML DOM中使用cursor屬性可設置或返回要為鼠標指針顯示的光標類型。

用法:

返回遊標屬性：
```
object.style.cursor
```
設置光標屬性：
```
object.style.cursor=value
```

屬性值：

alias:此屬性用於顯示光標指示要創建的內容。
all-scroll：在此屬性中，光標指示滾動。
auto:這是瀏覽器設置光標的默認屬性。
cell:在此屬性中，光標指示已選擇一個單元格或一組單元格。
context-menu：在此屬性中，光標指示上下文菜單可用。
col-resize：在此屬性中，光標指示可以水平調整列的大小。
copy:在此屬性中，光標指示要複製的內容。
crosshair:在此屬性中，光標呈現為十字準線。
default:默認光標。
e-resize：在此屬性中，光標指示框的邊將向右移動。
ew-resize：在此屬性中，光標指示雙向調整大小光標。
help:在此屬性中，光標指示幫助可用。
move:在此屬性中，光標指示要移動的內容
n-resize：在此屬性中，光標指示框的邊將向上移動。
ne-resize：在此屬性中，光標指示框的邊將向上和向右移動。
nesw-resize：此屬性指示雙向調整大小遊標。
ns-resize：此屬性指示雙向調整大小遊標。
nw-resize：在此屬性中，光標指示框的邊將向上和向左移動。
nwse-resize：此屬性指示雙向調整大小遊標。
no-drop：在此屬性中，光標指示不能將拖動的項目放在此處。
none:此屬性指示沒有為該元素呈現任何光標。
not-allowed：在此屬性中，光標指示將不會執行所請求的動作。
pointer:在此屬性中，光標是指針，表示鏈接
progress:在此屬性中，光標指示程序正忙。
row-resize：在此屬性中，光標指示可以垂直調整行的大小。
s-resize：在此屬性中，光標指示框的邊將向下移動。
se-resize：在此屬性中，光標指示框的邊將被上下移動。
sw-resize：在此屬性中，光標指示框的邊要上下移動。
text:在此屬性中，光標指示可以選擇的文本。
URL:在此屬性中，以逗號分隔的URL列表指向自定義遊標，而通用遊標則位於列表的末尾。
vertical-text：在此屬性中，光標指示可以選擇的vertical-text。
w-resize：在此屬性中，光標指示框的邊將向左移動。
wait:在此屬性中，光標指示程序正忙。
zoom-in：在此屬性中，光標指示可以放大的內容。
zoom-out：在此屬性中，光標表示可以縮小某些內容。
initial:此屬性用於設置為其默認值。
inherit:從其父元素繼承。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style cursor Property 
    </title> 
    <style> 
        .wait { 
            cursor:wait; 
        } 
          
        h1 { 
            color:green; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
  
        <h1>GeeksforGeeks</h1> 
        <p id="myP"> 
          Mouse over this text before and  
          after you have clicked the button below! 
        </p> 
  
        <button type="button"
                onclick="myFunction()"> 
          Change cursor 
        </button> 
  
        <script> 
            function myFunction() { 
                document.getElementById( 
                  "myP").style.cursor = "pointer"; 
            } 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

支持的瀏覽器：HTML支持的瀏覽器| DOM樣式遊標屬性在下麵列出：

穀歌瀏覽器
Edge
火狐瀏覽器
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自Vijay Sirra大神的英文原創作品 HTML | DOM Style cursor Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。