JS & DOM Reference
OverviewJavaScript Objects
JS Array JS Boolean JS Date JS Math JS Number JS String JS RegExp JS GlobalBrowser Objects
Window Navigator Screen History LocationCore DOM Objects
DOM Node DOM NodeList DOM NamedNodeMap DOM Document DOM Element DOM AttrHTML DOM Objects
DOM Document DOM Events DOM ElementsDOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Form DOM Frame/IFrame DOM Frameset DOM Image DOM Input Button DOM Input Checkbox DOM Input File DOM Input Hidden DOM Input Password DOM Input Radio DOM Input Reset DOM Input Submit DOM Input Text DOM Link DOM Meta DOM Object DOM Option DOM Select DOM Style DOM Table DOM td / th DOM tr DOM Textarea
Style cursor Property
Style Object
Definition and Usage
The cursor property sets or returns the type of cursor to display for the mouse pointer.
Syntax
Set the cursor property:
Object.style.cursor="value"
Return the cursor property:
Object.style.cursor
| Value | Description |
|---|---|
| auto | Browser default cursor (often an arrow). This is default |
| crosshair | Crosshair cursor |
| default | Platform-depended default cursor (often an arrow) |
| e-resize | East arrows. Indicates that an element is resizable |
| help | Arrow with question mark, indicating that help is available |
| move | Crossed arrows, indicating that something can be moved |
| n-resize | North arrows. Indicates that an element is resizable |
| ne-resize | North-east arrows. Indicates that an element is resizable |
| nw-resize | North-west. Indicates that an element is resizable |
| pointer | Normal hand |
| s-resize | South arrows. Indicates that an element is resizable |
| se-resize | South-east arrows. Indicates that an element is resizable |
| sw-resize | South-west arrows. Indicates that an element is resizable |
| text | The cursor indicates text |
| url | The URL of a cursor file to be used. Tip: Always define a generic cursor at the end of the list in case none of the url-defined cursors work |
| w-resize | West arrows. Indicates that an element is resizable |
| wait | Hourglass or watch, indicating that the program is busy |
Browser Support
The cursor property is supported in all major browsers.
Example
Example
Change the cursor:
<html>
<head>
<script>
function displayResult()
{
document.getElementById("p1").style.cursor="pointer";
}
</script>
</head>
<body>
<p id="p1">Mouse over this text!</p>
<br>
<button type="button" onclick="displayResult()">Change cursor</button>
</body>
</html>
<head>
<script>
function displayResult()
{
document.getElementById("p1").style.cursor="pointer";
}
</script>
</head>
<body>
<p id="p1">Mouse over this text!</p>
<br>
<button type="button" onclick="displayResult()">Change cursor</button>
</body>
</html>
Try it yourself »
More Examples
More cursors
Show all available cursors.
Style Object
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
