Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style cursor Property
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
<!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 −
Updated on: 23-Oct-2019
104 Views
Advertisements
To Continue Learning Please Login