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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。