Javascript DOM CSS Style cursor Property

Introduction

Change the cursor:

document.getElementById("myP").style.cursor = "pointer";

View in separate window

<!DOCTYPE html>
<html>
<body>

<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() {// w w w .j av  a2 s .  c om
  document.getElementById("myP").style.cursor = "pointer";
}
</script>

</body>
</html>

The cursor property sets or gets the type of cursor to display for the mouse pointer.

Property Values

Value Description
alias an alias of something is to be created
all-scrollsomething can be scrolled in any direction
auto Default. The browser sets a cursor
cell a cell may be selected
context-menu a context-menu is available
col-resizethe column can be resized horizontally
copy something is to be copied
crosshair render as a crosshair
default The default cursor
e-resize an edge of a box is to be moved right (east)
ew-resize a bidirectional resize cursor
help help is available
move something is to be moved
n-resize an edge of a box is to be moved up (north)
ne-resize an edge of a box is to be moved up and right (north/east)
n-e-s-w-resize a bidirectional resize cursor
ns-resize a bidirectional resize cursor
nw-resize an edge of a box is to be moved up and left (north/west)
n-w-s-e-resize a bidirectional resize cursor
no-drop the dragged item cannot be dropped here
none No cursor is rendered for the element
not-allowed the requested action will not be executed
pointer a pointer and indicates a link
progress the program is busy
row-resizethe row can be resized vertically
s-resize an edge of a box is to be moved down (south)
se-resize an edge of a box is to be moved down and right (south/east)
sw-resize an edge of a box is to be moved down and left (south/west)
text text that may be selected
URL A comma separated list of URLs to custom cursors.
vertical-text vertical-text that may be selected
w-resize an edge of a box is to be moved left (west)
wait the program is busy
zoom-in something can be zoomed in
zoom-out something can be zoomed out
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The cursor property returns a String representing the displayed mouse cursor when the mouse pointer is over an element.




PreviousNext

Related