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> |
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> |
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> |
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> |
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> |
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> |
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> |
Output:
Before clicking on Change cursor button-
After Clicking on Change cursor button.
Contact Us