极客教程JavaScript 光标属性
Style.cursor 指定当指向元素时要显示的鼠标光标。
以下是一些鼠标指针：
- wait
- help
- move
- pointer
- crosshair
- cell
- none
object.style.cursor = "光标名称";
JavaScript代码显示不同的鼠标指针：
代码＃1：
<html>
<body>
<p id="Cur">点击“Change Cursor”按钮后将鼠标移到文本上查看光标效果。</p>
<!-- Change Cursor button -->
<!-- Change function is called when button is Click. -->
<button type="button" onclick="Change()">Change Cursor</button>
<script>
function Change() {
// style.cursor specifies the mouse cursor to be displayed
// when pointing over an element.
document.getElementById("Cur").style.cursor = "wait";
}
</script>
</body>
</html>
输出:
点击Change cursor按钮之前-
点击Change cursor按钮之后-
代码 #2:
<html>
<body>
<p id="Cur">点击Change cursor按钮后在文本上面移动鼠标。</p>
<!-- Change Cursor按钮 -->
<!-- 点击按钮时调用Change函数。 -->
<button type="button" onclick="Change()">改变光标</button>
<script>
function Change() {
// style.cursor指定当指向元素时要显示的鼠标光标。
document.getElementById("Cur").style.cursor = "help";
}
</script>
</body>
</html>
输出：
在点击“更改光标”按钮之前-
在点击“更改光标”按钮之后。
代码＃3：
<html>
<body>
<p id="Cur">在点击“更改光标”按钮之后，将鼠标移动到文本上方。</p>
<!-- “更改光标”按钮 -->
<!-- 当按钮被点击时调用更改函数 -->
<button type="button" onclick="Change()">更改光标</button>
<script>
function Change() {
// style.cursor指定指向元素时要显示的鼠标光标
document.getElementById("Cur").style.cursor = "move";
}
</script>
</body>
</html>
输出：
在点击“更改光标”按钮之前-
点击“更改光标”按钮后。
代码 #4:
<html>
<body>
<p id="Cur">点击“更改光标”按钮后，在文本上移动鼠标。</p>
<!-- 更改光标按钮 -->
<!-- 在点击按钮时调用Change函数 -->
<button type="button" onclick="Change()">更改光标</button>
<script>
function Change() {
// style.cursor指定指向元素时显示的鼠标光标
document.getElementById("Cur").style.cursor = "pointer";
}
</script>
</body>
</html>
输出：
点击更改光标按钮之前 –
点击更改光标按钮之后 –
代码＃5：
<html>
<body>
<p id="Cur">在点击更改光标按钮后将鼠标移动到文本上。</p>
<!-- 更改光标按钮 -->
<!-- 当点击按钮时调用更改函数。 -->
<button type="button" onclick="Change()">更改光标</button>
<script>
function Change() {
// style.cursor指定要显示的鼠标光标
// 当指向一个元素时。
document.getElementById("Cur").style.cursor = "crosshair";
}
</script>
</body>
</html>
输出：
点击更改光标按钮之前-
点击更改光标按钮后-
代码＃6：
<html>
<body>
<p id="Cur">点击更改光标按钮后，请将鼠标移到文本上。</p>
<!-- 更改光标按钮 -->
<!-- 当按钮被点击时调用Change函数 -->
<button type="button" onclick="Change()">更改光标</button>
<script>
function Change() {
// style.cursor指定指向元素上方时要显示的鼠标光标
document.getElementById("Cur").style.cursor = "cell";
}
</script>
</body>
</html>
输出：
点击”Change Cursor”按钮之前-
点击”Change Cursor”按钮后-
代码＃7：
<html>
<body>
<p id="Cur">点击"Change Cursor"按钮后，在文本上移动鼠标。</p>
<!-- Change Cursor按钮 -->
<!-- 当点击按钮时调用Change函数。 -->
<button type="button" onclick="Change()">Change Cursor</button>
<script>
function Change() {
// style.cursor指定了指针位于元素上方时显示的鼠标样式
document.getElementById("Cur").style.cursor = "none";
}
</script>
</body>
</html>
输出：
在点击“更改光标”按钮之前-
在点击“更改光标”按钮之后-
