JavaScript | Cursor property
Last Updated :
19 Feb, 2019
Style.cursor specifies the mouse cursor to be displayed when pointing over an element.
Some of the mouse pointers are as follows:
- wait
- help
- move
- pointer
- crosshair
- cell
- none
Syntax:
object.style.cursor = "nameOfCursor";
JavaScript codes which show the different mouse pointer:
Code #1:
<html>
<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() {
document.getElementById("Cur").style.cursor = "wait";
}
</script>
</body>
</html>
|
Output:
Before clicking on Change cursor button-
After clicking on Change cursor button-
Code #2:
<html>
<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() {
document.getElementById("Cur").style.cursor = "help";
}
</script>
</body>
</html>
|
Output:
Before clicking on Change cursor button-
After Clicking on Change cursor button.
Code #3:
<html>
<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() {
document.getElementById("Cur").style.cursor = "move";
}
</script>
</body>
</html>
|
Output:
Before clicking on Change cursor button-
After Clicking on Change cursor button.
Code #4:
<html>
<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() {
document.getElementById("Cur").style.cursor = "pointer";
}
</script>
</body>
</html>
|
Output:
Before clicking on Change cursor button-
After Clicking on Change cursor button.
Code #5:
<html>
<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() {
document.getElementById("Cur").style.cursor = "crosshair";
}
</script>
</body>
</html>
|
Output:
Before clicking on Change cursor button-
After Clicking on Change cursor button.
Code #6:
<html>
<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() {
document.getElementById("Cur").style.cursor = "cell";
}
</script>
</body>
</html>
|
Output:
Before clicking on Change cursor button-
After Clicking on Change cursor button.
Code #7:
<html>
<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() {
document.getElementById("Cur").style.cursor = "none";
}
</script>
</body>
</html>
|
Output:
Before clicking on Change cursor button-
After Clicking on Change cursor button.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...