Open In App

HTML | DOM Style cursor Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

  

Supported Browsers: The browser supported by HTML | DOM Style cursor Property are listed below:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 4 and above
  • Mozilla Firefox 1 and above
  • Opera 7 and above
  • Safari 1.2 and above


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads