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:

jQWidgets jqxSortable cursorAt Property

Naman_Garg

Improve

Article Tags :

JavaScript Cursor Property

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?