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.

We have the following properties for the cursor style,

wait
help
move
pointer
crosshair
cell
none

The general syntax for this is,

    object.style.cursor="cursor property";

Let's go ahead and try these properties out.

<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

JavaScript | cursor property | example 1

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

JavaScript | cursor property | example 2

<script>
    document.querySelector('.box').style.cursor = "help";
</script>

Output

JavaScript | cursor property | example 3

<script>
    document.querySelector('.box').style.cursor = "move";
</script>

Output

JavaScript | cursor property | example 4

<script>
    document.querySelector('.box').style.cursor = "pointer";
</script>

Output

JavaScript | cursor property | example 5

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 »

JavaScript infinity Property

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples