HTML - DOM Style 对象 cursor 属性

HTML DOM Style 对象 **cursor** 属性用于设置或获取鼠标指针要显示的光标类型。

语法

设置 cursor 属性

object.style.cursor= value;

获取 cursor 属性

object.style.cursor;

属性值

值	描述
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 的逗号分隔列表。如果无法使用任何 URL 定义的光标，则在列表的末尾指定通用光标。
vertical-text	表示可以选择垂直文本。
w-resize	表示要将框的边缘向左移动。
wait	表示程序繁忙。
zoom-in	表示可以放大某些内容。
zoom-out	表示可以缩小某些内容。
initial	用于将此属性设置为其默认值。
inherit	用于继承其父元素的属性。

返回值

它返回一个字符串值，该值表示当鼠标指针位于元素上时显示的鼠标光标。

HTML DOM Style 对象“cursor”属性的示例

以下示例说明了 cursor 属性的不同属性值。

设置各种光标值

在以下示例中，我们将光标更改为指针、单元格、放大和十字准线。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object cursor Property
    </title>
</head>
<body>
    <button onclick="crosshair()">Crosshair</button>
    <button onclick="pointer()">Pointer</button>
    <button onclick="cell()">Cell</button>
    <button onclick="zoomin()">Zoom-in</button>
    <p id="cursor">
        This paragraph is for you to try different cursors.
    </p>
    <script>
        function crosshair() {
            document.getElementById("cursor")
            .style.cursor = "crosshair";
        }
        function pointer() {
            document.getElementById("cursor")
            .style.cursor = "pointer";
        }
        function cell() {
            document.getElementById("cursor")
            .style.cursor = "cell";
        }
        function zoomin() {
            document.getElementById("cursor")
            .style.cursor = " zoom-in";
        }
    </script>
</body>
</html>

将光标值设置为“wait”和“move”

以下示例说明了 cursor 属性的其他一些示例，例如 wait、move、help 和 ns-resize。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object cursor Property
    </title>
</head>
<body>
    <button onclick="help()">Help</button>
    <button onclick="move()">Move</button>
    <button onclick="nsresize()">ns-resize</button>
    <button onclick="wait()">Wait</button>
    <p id="cursor">
        This paragraph is for you to try different cursors.
    </p>
    <script>
        function help() {
            document.getElementById("cursor")
            .style.cursor = "help";
        }
        function move() {
            document.getElementById("cursor")
            .style.cursor = "move";
        }
        function nsresize() {
            document.getElementById("cursor")
            .style.cursor = "ns-resize";
        }
        function wait() {
            document.getElementById("cursor")
            .style.cursor = "wait";
        }
    </script>
</body>
</html>

支持的浏览器

属性
cursor	是 1	是 12	是 1	是 1.2	是 7

html_dom_style_object_reference.htm

打印页面