HTML | DOM Style cursor Property

The cursor property is used in HTML DOM to set or return the type of cursor to display for the mouse pointer.

Syntax:

Return the cursor property:

object.style.cursor

Set the cursor property:

object.style.cursor=value

Property Values:

alias: This property is used to display the cursor’s indication of something is to be created.
all-scroll: In this property, the cursor indicates scrolling.
auto: This is the default property where the browser sets a cursor.
cell: In this property, the cursor indicates a cell or set of cells are selected.
context-menu: In this property, the cursor indicates that a context menu is available.
col-resize: In this property, the cursor indicates that the column can be resized horizontally.
copy: In this property, the cursor indicates something is to be copied.
crosshair: In this property, the cursor renders as a crosshair.
default: The default cursor.
e-resize: In this property, the cursor indicates an edge of a box is to be moved to the right.
ew-resize: In this property, the cursor indicates a bidirectional resize cursor.
help: In this property, the cursor indicates that help is available.
move: In this property, the cursor indicates something is to be moved
n-resize: In this property, the cursor indicates an edge of a box is to be moved up.
ne-resize: In this property, the cursor indicates an edge of a box is to be moved up and right.
nesw-resize: This property indicates a bidirectional resize cursor.
ns-resize: This property indicates a bidirectional resize cursor.
nw-resize: In this property, the cursor indicates an edge of a box is to be moved up and left.
nwse-resize: This property indicates a bidirectional resize cursor.
no-drop: In this property, the cursor indicates that the dragged item cannot be dropped here.
none: This property indicates no cursor is rendered for the element.
not-allowed: In this property, the cursor indicates that the requested action will not be executed.
pointer: In this property, the cursor is a pointer and indicates link
progress: In this property, the cursor indicates that the program is busy.
row-resize: In this property, the cursor indicates that the row can be resized vertically.
s-resize: In this property, the cursor indicates an edge of a box is to be moved down.
se-resize: In this property, the cursor indicates an edge of a box is to be moved down and right.
sw-resize: In this property, the cursor indicates an edge of a box is to be moved down and left.
text: In this property, the cursor indicates text that may be selected.
URL: In this property a comma-separated list of URLs to custom cursors and a generic cursor at the end of the list.
vertical-text: In this property, the cursor indicates vertical-text that may be selected.
w-resize: In this property, the cursor indicates an edge of a box is to be moved left.
wait: In this property, the cursor indicates that the program is busy.
zoom-in: In this property, the cursor indicates that something can be zoomed in.
zoom-out: In this property, the cursor indicates that something can be zoomed out.
initial: This property is used to set to its default value.
inherit: Inherits from its parent element.

Return Values: It returns a String, value which representing the displayed mouse cursor when the mouse pointer is over an element

Example:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style cursor Property
    </title>
    <style>
        .wait {
            cursor: wait;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
 
        <h1>GeeksforGeeks</h1>
        <p id="myP">
          Mouse over this text before and
          after you have clicked the button below!
        </p>
 
        <button type="button"
                onclick="myFunction()">
          Change cursor
        </button>
 
        <script>
            function myFunction() {
                document.getElementById(
                  "myP").style.cursor = "pointer";
            }
        </script>
    </center>
</body>
 
</html>