The HTML DOM Style cursor property is used for setting or getting the cursor type while displaying the mouse pointer.
Following is the syntax for −
Setting the cursor property −
object.style.cursor=value
The following table demonstrates the value
| Value | Description |
|---|---|
| alias | Thecursor indicates an alias of something is to be created |
| all-scroll | Thecursor indicates that something can be scrolled in any direction |
| auto | Default.The browser sets a cursor |
| cell | Thecursor indicates that a cell (or set of cells) may be selected |
| context-menu | Thecursor indicates that a context-menu is available |
| col-resize | Thecursor indicates that the column can be resized horizontally |
| copy | Thecursor indicates something is to be copied |
| crosshair | Thecursor render as a crosshair |
| default | Thedefault cursor |
| e-resize | Thecursor indicates that an edge of a box is to be moved right (east) |
| ew-resize | Indicatesa bidirectional resize cursor |
| grab | Thecursor indicates that something can be grabbed |
| grabbing | Thecursor indicates that something can be grabbed |
| help | Thecursor indicates that help is available |
| move | Thecursor indicates something is to be moved |
| n-resize | Thecursor indicates that an edge of a box is to be moved up (north) |
| ne-resize | Thecursor indicates that an edge of a box is to be moved up and right(north/east) |
| nesw-resize | Indicatesa bidirectional resize cursor |
| ns-resize | Indicatesa bidirectional resize cursor |
| nw-resize | Thecursor indicates that an edge of a box is to be moved up and left(north/west) |
| nwse-resize | Indicatesa bidirectional resize cursor |
| no-drop | Thecursor indicates that the dragged item cannot be dropped here |
| none | Nocursor is rendered for the element |
| not-allowed | Thecursor indicates that the requested action will not be executed |
| pointer | Thecursor is a pointer and indicates a link |
| progress | Thecursor indicates that the program is busy (in progress) |
| row-resize | Thecursor indicates that the row can be resized vertically |
| s-resize | Thecursor indicates that an edge of a box is to be moved down (south) |
| se-resize | Thecursor indicates that an edge of a box is to be moved down andright (south/east) |
| sw-resize | Thecursor indicates that an edge of a box is to be moved down andleft (south/west) |
| text | Thecursor indicates text that may be selected |
| URL | Acomma separated list of URLs to custom cursors. Note: Alwaysspecify a generic cursor at the end of the list, in case none ofthe URL-defined cursors can be used |
| vertical-text | Thecursor indicates vertical-text that may be selected |
| w-resize | Thecursor indicates that an edge of a box is to be moved left (west) |
| wait | Thecursor indicates that the program is busy |
| zoom-in | Thecursor indicates that something can be zoomed in |
| zoom-out | Thecursor indicates that something can be zoomed out |
| initial | Setsthis property to its default value. |
| inherit | Inheritsthis property from its parent element. |
Let us look at an example for the cursor property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#one {
background-color: beige;
}
#two {
background-color: lavender;
}
</style>
<script>
function changeCursor() {
document.getElementById("one").style.cursor = "cell";
document.getElementById("two").style.cursor = "grab";
document.getElementById("Sample").innerHTML="Hover over the first paragraph to see cursor change to cell and on second to see it change to grab icon";
}
</script>
</head>
<body>
<p id="one">This is some sample text inside first paragraph.This is some sample text inside first paragraph.This is some sample text inside first paragraph.This is some sample text inside first paragraph.</p>
<p id="two">This is some sample text inside second paragraph.This is some sample text inside second paragraph.This is some sample text inside second paragraph.This is some sample text inside second paragraph.</p>
<p>Change the cursor property by clicking the below button</p>
<button onclick="changeCursor()">Change Cursor</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Cursor” button, the cursor changed and the same is visible in the below screenshot −
