Javascript Reference - HTML DOM Style cursor Property








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

Browser Support

cursor Yes Yes Yes Yes Yes

Syntax

Return the cursor property:

var v = object.style.cursor

Set the cursor property:

object.style.cursor=value

Property Values

Value Description
URL A comma separated of URLs to load for custom cursors.
auto Default. The browser will choose a cursor
crosshair crosshair cursor
default default cursor
e-resize east edge resizable cursor
help help cursor
move movable cursor
n-resize north edge resizable cursor
ne-resize north/east edge resizable cursor
nw-resize north/west edge resizable cursor
pointer pointer cursor
progress busy cursor
s-resize south edge resizable cursor
se-resize south/east edge resizable cursor
sw-resize south/west edge resizable cursor
text text cursor
w-resize west edge resizable cursor
wait busy cursor
inherit inherit the cursor property from the parent element




Technical Details

Default Value: auto
Return Value: A string representing the mouse cursor
CSS Version CSS2

Example

The following code shows how to change the cursor.


<!DOCTYPE html>
<html>
<body>
<!--  ww w  . ja v a  2s.  c  o  m-->
<p id="myP">Mouse over here!</p>

<button type="button" onclick="myFunction()">test</button>
 
<script>
function myFunction() {
    document.getElementById("myP").style.cursor = "pointer";
}
</script>

</body>
</html>

The code above is rendered as follows:





Example 2

The following code shows all available cursors.


<!DOCTYPE html>
<html>
<body>
<!--  w ww.j  av  a 2s . c o  m-->
<p>Select a cursor in the list below and move the cursor over the body.</p>

<select onchange="myFunction(this);">
  <option>alias
  <option>all-scroll
  <option>auto
  <option>cell
  <option>context-menu
  <option>col-resize
  <option>copy
  <option>crosshair
  <option>default
  <option>e-resize
  <option>ew-resize
  <option>help
  <option>move
  <option>n-resize
  <option>ne-resize
  <option>nw-resize
  <option>ns-resize
  <option>no-drop
  <option>none
  <option>not-allowed
  <option>pointer
  <option>progress
  <option>row-resize
  <option>s-resize
  <option>se-resize
  <option>sw-resize
  <option>text
  <option>vertical-text
  <option>w-resize   
  <option>wait
  <option>zoom-in
  <option>zoom-out
</select>

<script>
function myFunction(x) {
    var whichSelected = x.selectedIndex;
    document.body.style.cursor = x.options[whichSelected].text;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the type of cursor.


<!DOCTYPE html>
<html>
<body>
<!--from  w ww .ja v  a  2  s .c  o  m-->
<p id="myP" style="cursor:wait;">Mouse over me.</p>

<button type="button" onclick="myFunction()">test</button>
 
<script>
function myFunction() {
    console.log(document.getElementById("myP").style.cursor);
}
</script>

</body>
</html>

The code above is rendered as follows: