JavaScript | Cursor property
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";
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() { // style.cursor specifies the mouse cursor to be displayed // when pointing over an element. document.getElementById("Cur").style.cursor = "wait"; } </script> </body> </html> |
chevron_right
filter_none
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() { // style.cursor specifies the mouse cursor to be displayed // when pointing over an element. document.getElementById("Cur").style.cursor = "help"; } </script> </body> </html> |
chevron_right
filter_none
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() { // style.cursor specifies the mouse cursor to be displayed // when pointing over an element. document.getElementById("Cur").style.cursor = "move"; } </script> </body> </html> |
chevron_right
filter_none
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() { // style.cursor specifies the mouse cursor to be displayed // when pointing over an element. document.getElementById("Cur").style.cursor = "pointer"; } </script> </body> </html> |
chevron_right
filter_none
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() { // style.cursor specifies the mouse cursor to be displayed // when pointing over an element. document.getElementById("Cur").style.cursor = "crosshair"; } </script> </body> </html> |
chevron_right
filter_none
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() { // style.cursor specifies the mouse cursor to be displayed // when pointing over an element. document.getElementById("Cur").style.cursor = "cell"; } </script> </body> </html> |
chevron_right
filter_none
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() { // style.cursor specifies the mouse cursor to be displayed // when pointing over an element. document.getElementById("Cur").style.cursor = "none"; } </script> </body> </html> |
chevron_right
filter_none
Output:
Before clicking on Change cursor button-
After Clicking on Change cursor button.
Recommended Posts:
- Hide the cursor in a webpage using CSS and JavaScript
- p5.js | cursor() Function
- JavaScript | Math.PI Property
- JavaScript | Infinity Property
- JavaScript | undefined Property
- JavaScript | multiline Property
- JavaScript | lastIndex Property
- Javascript | MouseEvent which Property
- JavaScript | source Property
- JavaScript | global Property
- How to remove CSS property using JavaScript?
- JavaScript | Error name Property
- JavaScript | Math.LN2 property
- JavaScript | MouseEvent shiftKey Property
- JavaScript | Symbol.hasInstance Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
