How to set the type of cursor to display for the mouse pointer with JavaScript?

In this tutorial, we will learn to set the type of cursor for the mouse pointer with JavaScript. To set the type of cursor, use the cursor property in JavaScript. It allows you to change the cursor on the button click.

We can even change the type of cursor by using JavaScript. Different types of cursors have different meanings. There are many styles of cursors that can use on our webpage.

Let us look at how to set the type of cursor to display for the mouse pointer with JavaScript.

Using the Style cursor Property

The cursor property is used to set the type of cursor to display for the mouse pointer. These styles indicate the current state of process or type of the element the mouse is on.

Syntax

We can follow the below syntax to set the type of cursor to display for the mouse pointer with JavaScript.

var element = document.getElementById(" <Type ID here> ");
element.style.cursor = Wait || Help || Move || Pointer || Crosshair || Cell || None ;

You can follow the above syntax to set the type of cursor.

Parameters

  • Wait − Indicates that the program is busy and we have to wait. The cursor looks like a circular blue shape as a cursor.

  • Help − Indicates that we can take help. The cursor looks like the question mark with an arrow pointer.

  • Move − Indicates that we can move the object. The cursor looks like two lines intersecting at the center.

  • Pointer −Indicates that we are taking the cursor on a link. The cursor looks like the hand with the first finger pointing upwards.

  • Crosshair −Indicates that we can select the portion. The cursor looks like the two intersecting segments.

  • Cell − Indicates that we are taking the cursor on the cell and can select it. The cursor looks like an addition sign.

  • None − No cursor has been rendered.

Example 1

You can try to run the following code to set the type of cursor to display for the mouse pointer with JavaScript.

<!DOCTYPE html>
<html>
<body>
   <h1 id="myID">Heading 1</h1>
   <p>Check the heading before and after mouse hover.</p>
   <button type="button" onclick="display()">Click to change the cursor</button>
   <script>
      function display() {
         document.getElementById("myID").style.cursor = "pointer";
      }
   </script>
</body>
</html>

Example 2

In the example, we have added a dropdown menu consisting of the style of the cursor. We will select the style that is to display for the cursor. After clicking a button, we will apply the style to the cursor selected in the dropdown.

<html>
<body>
   <h2> Use <i> cursor property </i> to set the type of cursor to display </h2>
   <div id = "container">
      Select the type of cursor: <br>
      <select id = "selected_value">
         <option value = "wait"> wait </option>
         <option value = "help"> help </option>
         <option value = "move"> move </option>
         <option value = "pointer"> pointer </option>
         <option value = "crosshair"> crosshair </option>
         <option value = "cell"> cell </option>
         <option value = "none"> none </option>
      </select>
      <button id = "btn">Submit</button>
   </div>
   <script>
      document.getElementById("btn").addEventListener("click", func);
      function func(){
         var div = document.getElementById("container");
         var cursor_type = document.getElementById("selected_value").value;
         document.body.style.cursor = cursor_type;
         if(document.getElementById("ids")){
            document.getElementById("ids").remove();
         }
         var para = document.createElement("p");
         para.id = "ids"
         para.innerHTML = "Type of the cursor: " + cursor_type;
         div.appendChild(para);
      }
   </script>
</body>
</html>

In the above example, users can see that we have used the cursor to set the type of mouse pointer cursor to display.

Example 3

In the following example, we have added all the styles for the cursor in an array. We have used the setInterval method to execute a function after an interval. Within a function, we are setting the style of the cursor from every element of an array. So, after clicking a button, we change the cursor styles one by one after an interval.

<html>
<body>
   <h2> Use <i> cursor property </i> to set the type of cursor to display </h2>
   <div id = "container">
      <button id = "btn"> Changing cursors </button>
   </div>
   <script>
      var i = 0;
      document.getElementById("btn").addEventListener("click", func);
      var types = ["wait", "help", "move", "pointer", "none", "crosshair", "cell"];
      function func(){
         timer = setInterval(function(){
            if(i < types.length){
               document.body.style.cursor = types[i];
               console.log(types[i]);
               i++;
            }else{
               i = 0;
               func();
            }
         },2000);
      }
   </script>
</body>
</html>

In the above example, users can see the style of the cursor changing from one to another after a specific interval.

In this tutorial, we learned to set the type of cursor to display for the mouse pointer with JavaScript.

Updated on: 12-Oct-2022

1K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements