Home »
JavaScript
Cursor Property in JavaScript
JavaScript | Cursor Property: Here, we are going to learn about the Cursor Property in JavaScript with syntax and examples.
Submitted by Siddhant Verma, on January 10, 2020
JavaScript | Cursor Property
The cursor property in JavaScript is used to change the style of the cursor pointer displayed on the screen. In this article, we'll look at the number of cursor pointer styles available to us and how to change these styles using the cursor property.
Values
We have the following properties for the cursor style,
- wait
- help
- move
- pointer
- crosshair
- cell
- none
Syntax
The general syntax for this is,
object.style.cursor="cursor property";
Let's go ahead and try these properties out.
Example 1
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Focus method</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {
background: palevioletred;
}
.box {
position: absolute;
width: 200px;
height: 200px;
background: rgb(230, 230, 124);
padding: 2px;
margin: 2px;
left: 500px;
top: 200px;
}
</style>
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
<script>
</script>
</html>
Output
Example 2
When we move our cursor over the yellow box, our cursor will acquire different properties or the style of our cursor will change. All we have to do is get a reference to the yellow box inside and set different style properties for the cursor. Let's try out the wait one,
<script>
document.querySelector('.box').style.cursor = "wait";
</script>
Output
Example 3
<script>
document.querySelector('.box').style.cursor = "help";
</script>
Output
Example 4
<script>
document.querySelector('.box').style.cursor = "move";
</script>
Output
Example 5
<script>
document.querySelector('.box').style.cursor = "pointer";
</script>
Output
This way you can try out all the cursor properties in JavaScript. You can also recall that this property was used to provide haptic feedback to the user and was used as a great user experience whenever a user would have to wait for something to load, or a request being sent, or an information tab, etc.
JavaScript Built-in Functions »