HTML DOM Style cursor Property

HTMLWeb DevelopmentFront 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>

Output

On clicking the “Change Cursor” button, the cursor changed and the same is visible in the below screenshot −

raja
Updated on 23-Oct-2019 12:11:32

Advertisements