Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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("element-id");
element.style.cursor = "wait" || "help" || "move" || "pointer" || "crosshair" || "cell" || "none";
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: Changing Cursor on Button Click
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: Dynamic Cursor Selection
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>
Example 3: Automatically Cycling Cursors
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.
Common Cursor Types
| Cursor Value | Description | Common Use Case |
|---|---|---|
default |
Default arrow cursor | General use |
pointer |
Hand cursor | Links and clickable elements |
wait |
Loading spinner | During processing |
text |
I-beam cursor | Text input areas |
move |
Four-directional arrows | Draggable elements |
Conclusion
The cursor property in JavaScript provides an easy way to enhance user experience by changing mouse pointer styles. Use appropriate cursor types to indicate different states and interactions on your webpage.
2K+ Views
