HTML DOM Style cursor Property

HTML Web Development Front End Technology

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

Live Demo

<!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>