JavaScript Cursor Property
Last Updated :
17 Jun, 2024
Style.cursor specifies the mouse cursor to be displayed when pointing over an element.
Syntax:
object.style.cursor = "cursorValue";
Some important mouse pointers are as follows:
- wait
- help
- move
- pointer
- crosshair
- cell
- none
Example 1: This example shows the use of the JavaScript cursor property.
HTML
<html>
<head>
<title>
JavaScript Cursor
</title>
</head>
<body>
<p id="Cur">
Move mouse over the text after clicking
Change cursor button.
</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>
Output:
Example 2: This example shows the use of the JavaScript cursor property.
HTML
<html>
<head>
<title>
JavaScript Cursor
</title>
</head>
<body>
<p id="Cur">
Move mouse over the text after clicking
Change cursor button.
</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 = "help";
}
</script>
</body>
</html>
Output:
Example 3: This example shows the use of the JavaScript cursor property.
HTML
<html>
<head>
<title>
JavaScript Cursor
</title>
</head>
<body>
<p id="Cur">
Move mouse over the text after
clicking Change cursor button.
</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 = "move";
}
</script>
</body>
</html>
Output:
Example 4: This example shows the use of the JavaScript cursor property.
HTML
<html>
<head>
<title>
JavaScript Cursor
</title>
</head>
<body>
<p id="Cur">
Move mouse over the text after
clicking Change cursor button.
</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 = "pointer";
}
</script>
</body>
</html>
Output: