Style cursorProperty
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 | Default. The cursor set by the browser (usually an arrow). |
| crosshair | The cursor renders as a crosshair. |
| default | Default cursor (usually an arrow). |
| e-resize | Right (east) arrow, indicating that the element is resizable; the edge of the rectangular box can be moved right (east). |
| help | An arrow with a question mark, indicating that help is available. |
| move | Crossed arrows, indicating that an object can be moved. |
| n-resize | Up (north) arrow, indicating that the element is resizable; the edge of the rectangular box can be moved up (north). |
| ne-resize | Northeast arrow, indicating that the element is resizable; the edge of the rectangular box can be moved up and right (north/east). |
| nw-resize | Northwest arrow, indicating that the element is resizable; the edge of the rectangular box can be moved up and left (north/west). |
| pointer | The cursor renders as a pointer (a hand) indicating a link. |
| s-resize | Down (south) arrow, indicating that the element is resizable; the edge of the rectangular box can be moved down (south). |
| se-resize | Southeast arrow, indicating that the element is resizable; the edge of the rectangular box can be moved down and right (south/east). |
| sw-resize | Southwest arrow, indicating that the element is resizable; the edge of the rectangular box can be moved down and left (south/west). |
| text | This cursor indicates text. |
| url | The URL of the custom cursor to be used.Tip:Always define a normal cursor at the end of this list, in case there is no available cursor defined by the URL. |
| w-resize | Left (west) arrow, indicating that the element is resizable; the edge of the rectangular box can be moved left (west). |
| wait | This cursor indicates that the program is busy (usually a watch or an hourglass). |
Browser Support
All major browsers support the cursor property.
Example
Example
Change the cursor:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script>
function displayResult(){
document.getElementById("p1").style.cursor="pointer";
}
</script>
</head>
<body>
<p id="p1">Move the mouse over this text.</p>
<br>
<button type="button" onclick="displayResult()">Change cursor type</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script>
function displayResult(){
document.getElementById("p1").style.cursor="pointer";
}
</script>
</head>
<body>
<p id="p1">Move the mouse over this text.</p>
<br>
<button type="button" onclick="displayResult()">Change cursor type</button>
</body>
</html>
Try it Yourself »
More Examples
More Cursors
Display all available cursors.
Style Object Other Extensions