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

列印頁面