Tutorialspoint.dev

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";
    

    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-

    br>

    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.



This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter