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>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
cursor 是 1 是 12 是 1 是 1.2 是 7
html_dom_style_object_reference.htm
广告