JavaScript | Cursor property - GeeksforGeeks

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
noneSyntax: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() {            // 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.My Personal Notes
arrow_drop_upSave
Syntax:
object.style.cursor = "nameOfCursor";

<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.
javascript-basics
JavaScript-Misc
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
JavaScript | console.log() with Examples
How to read a local text file using JavaScript?
Difference Between PUT and PATCH Request
How to Use the JavaScript Fetch API to Get Data?
Set the value of an input field in JavaScript