• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Change the cursor with Javascript

Change the cursor with Javascript

This post shows how to change the cursor on a web page with Javascript by assigning a value to the document.body.style.cursor property.

Assign a value to document.body.style.cursor

Assign one of the cursor properties to document.body.style.cursor to change the cursor. The first example below will change the cursor to an hourglass:

document.body.style.cursor = "wait";

The second example restores it back again by assigning "default" to the cursor property:

document.body.style.cursor = "default";

Working Example

The following select box and button can be used to change the cursor. If you are viewing this post in an RSS reader you will probably need to click through to view this in a web browser for the example to work.

Example Code

Here’s the code behind the example above:

<script language="Javascript">
	function example_change_cursor() {
		document.body.style.cursor = document.getElementById('example-cursor').options[document.getElementById('example-cursor').selectedIndex].value;
	}
	function example_restore_cursor() {
		document.body.style.cursor = 'default';
	}
</script>
<select id="example-cursor">
	<option>default</option>
	<option>crosshair</option>
	<option>e-resize</option>
	<option>help</option>
	<option>move</option>
	<option>n-resize</option>
	<option>ne-resize</option>
	<option>nw-resize</option>
	<option>pointer</option>
	<option>progress</option>
	<option>s-resize</option>
	<option>se-resize</option>
	<option>sw-resize</option>
	<option>text</option>
	<option>w-resize</option>
	<option>wait</option>
</select>
<input type="button" onclick="example_change_cursor()" value="Change Cursor" />
<input type="button" onclick="example_restore_cursor()" value="Restore Default" />

Check Out These Related posts:

  1. Add options to an HTML select box with Javascript
  2. ExpressVPN vs. IPVanish – Which is Better?
  3. Javascript UNIX timestamp converter
  4. CSS cursor property

Filed Under: Javascript

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap