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 −