Skip to content
Related Articles

Related Articles

JavaScript | Cursor property
  • Difficulty Level : Hard
  • Last Updated : 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
  • 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-



    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.

    full-stack-img

    My Personal Notes arrow_drop_up
Recommended Articles
Page :