HTML - DOM Style Object cursor Property

Quiz

HTML DOM Style Object cursor property is used to set or grt the type of cursor to be displayed for the mouse pointer.

Syntax

Set the cursor property:

object.style.cursor= value;

Get the cursor property:

object.style.cursor;

Property Values

Value	Description
alias	It indicates shortcut or alias of something is to be created.
all-scroll	It indicates scrolling in any direction.
auto	It is default property where browser sets the cursor.
cell	It indicates table cell or set of cells may be selected
context-menu	It indicates the availability of a context menu.
col-resize	It indicates a column can be resized horizontally.
copy	It indicates something is to be copied.
crosshair	In this property value, cursor renders as a crosshair.
default	It represents the default cursor generally an arrow.
e-resize	It indicates an edge of a box is to be moved to the right.
ew-resize	It represents a bidirectional cursor.
help	It indicates availability of help information.
move	It indicates something is to be moved.
n-resize	It indicates an edge of a box is to be moved up.
ne-resize	It indicates that an edge of a box is to be moved up and right.
nesw-resize	It indicates a bidirectional resize cursor.
ns-resize	It indicates a bidirectional resize cursor.
nw-resize	It indicates that an edge of a box is to be moved up and left.
nwse-resize	It indicates a bidirectional resize cursor.
no-drop	It indicates that the dragged item cannot be dropped here.
none	It indicates no cursor is rendered for the element.
not-allowed	It indicates that the requested action will not be executed.
pointer	It represents cursor as a pointer and indicates link.
progress	It indicates that the program is busy.
row-resize	It indicates row can be resized vertically.
s-resize	It indicates an edge of a box is to be moved down.
se-resize	It indicates an edge of a box is to be moved down and right.
sw-resize	It indicates an edge of a box is to be moved down and left.
text	It indicates text which may be selected.
URL	It indicates a comma-separated list of URLs to custom cursors. A generic cursor is specified at the end of the list in case if none of the URL-defined cursors can be used.
vertical-text	It indicates vertical-text that may be selected.
w-resize	It indicates an edge of a box is to be moved left.
wait	It indicates that the program is busy.
zoom-in	It indicates that something can be zoomed in.
zoom-out	It indicates that something can be zoomed out.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents displayed mouse cursor when the mouse pointer is over an element.

Examples of HTML DOM Style Object 'cursor' Property

The following examples illustrates different property values of cursor property.

Set Various Cursor Values

In the following example we have changed cursor into pointer, cell, zoom-in and crosshair.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object cursor Property
    </title>
</head>
<body>
    <button onclick="crosshair()">Crosshair</button>
    <button onclick="pointer()">Pointer</button>
    <button onclick="cell()">Cell</button>
    <button onclick="zoomin()">Zoom-in</button>
    <p id="cursor">
        This paragraph is for you to try different cursors.
    </p>
    <script>
        function crosshair() {
            document.getElementById("cursor")
            .style.cursor = "crosshair";
        }
        function pointer() {
            document.getElementById("cursor")
            .style.cursor = "pointer";
        }
        function cell() {
            document.getElementById("cursor")
            .style.cursor = "cell";
        }
        function zoomin() {
            document.getElementById("cursor")
            .style.cursor = " zoom-in";
        }
    </script>
</body>
</html>

Set Cursor Value to 'wait' and 'move'

The following example illustrates few more examples of cursor property like wait, move, help and ns-resize.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object cursor Property
    </title>
</head>
<body>
    <button onclick="help()">Help</button>
    <button onclick="move()">Move</button>
    <button onclick="nsresize()">ns-resize</button>
    <button onclick="wait()">Wait</button>
    <p id="cursor">
        This paragraph is for you to try different cursors.
    </p>
    <script>
        function help() {
            document.getElementById("cursor")
            .style.cursor = "help";
        }
        function move() {
            document.getElementById("cursor")
            .style.cursor = "move";
        }
        function nsresize() {
            document.getElementById("cursor")
            .style.cursor = "ns-resize";
        }
        function wait() {
            document.getElementById("cursor")
            .style.cursor = "wait";
        }
    </script>
</body>
</html>

Supported Browsers

Property
cursor	Yes 1	Yes 12	Yes 1	Yes 1.2	Yes 7

html_dom.htm

Print Page