免費AI編程助手
Style cursor 屬性
Style 對象
定義和用法
cursor 屬性設置或返回鼠標指針顯示的光標類型。
語法
設置 cursor 屬性：
Object.style.cursor="value"
返回 cursor 屬性：
Object.style.cursor
| 值 | 描述 |
|---|---|
| auto | 默認。瀏覽器設置的光標（通常是一個箭頭）。 |
| crosshair | 光標呈現為十字線。 |
| default | 默認光標（通常是一個箭頭）。 |
| e-resize | 向右（東）的箭頭，指示元素是可變尺寸的，矩形框的邊緣可被向右（東）移動。 |
| help | 帶有問號的箭頭，指示可用的幫助。 |
| move | 交叉箭頭，指示某對象可被移動。 |
| n-resize | 向上（北）的箭頭，指示元素是可變尺寸的，矩形框的邊緣可被向上（北）移動。 |
| ne-resize | 東北方向的箭頭，指示元素是可變尺寸的，矩形框的邊緣可被向上及向右移動（北/東）。 |
| nw-resize | 西北方向的箭頭，指示元素是可變尺寸的，矩形框的邊緣可被向上及向左移動（北/西）。 |
| pointer | 光標呈現為指示鏈接的指針（一只手）。 |
| s-resize | 向下（南）的箭頭，指示元素是可變尺寸的，矩形框的邊緣可被向下（南）移動。 |
| se-resize | 東南方向的箭頭，指示元素是可變尺寸的，矩形框的邊緣可被向下及向右移動（南/東）。 |
| sw-resize | 西南方向的箭頭，指示元素是可變尺寸的，矩形框的邊緣可被向下及向左移動（南/西）。 |
| text | 此光標指示文本。 |
| url | 需被使用的自定義光標的 URL。提示： 請在此列表的末端始終定義一種普通的光標，以防沒有由 URL 定義的可用光標。 |
| w-resize | 向左（西）的箭頭，指示元素是可變尺寸的，矩形框的邊緣可被向左（西）移動。 |
| wait | 此光標指示程序正忙（通常是一只表或沙漏）。 |
瀏覽器支持
所有主要瀏覽器都支持 cursor 屬性。
實例
實例
更改光標：
<html>
<head>
<script>
function displayResult()
{
document.getElementById("p1").style.cursor="pointer";
}
</script>
</head>
<body>
<p id="p1">Mouse over this text!</p>
<br>
<button type="button" onclick="displayResult()">Change cursor</button>
</body>
</html>
<head>
<script>
function displayResult()
{
document.getElementById("p1").style.cursor="pointer";
}
</script>
</head>
<body>
<p id="p1">Mouse over this text!</p>
<br>
<button type="button" onclick="displayResult()">Change cursor</button>
</body>
</html>
嘗試一下 ?
更多實例
更多光標
顯示所有可用的光標。
Style 對象
更多建議：