JavaScript Cursor Change (and change back again)

The styling should be handled via CSS, as stated by W3C.com:

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. ... The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

As suggested by Tom Rogerro, add a line to your CSS file:

body.waiting * { cursor: wait; }

However, your script should not overwrite the entire list of class names. Tom suggested setting the class names via jQuery, but jQuery is unnecessary in this case. Simple Javascript can do this.

To add a class name 'waiting' to the document body:

document.body.classList.add('waiting');

To remove a class name 'waiting' from the document body:

document.body.classList.remove('waiting');

What I suggest is two things: a) Better write a CSS like

body.waiting * { cursor: wait; }

b) Use the JS to handle the body class

/* when you need to wait */
document.body.className = 'waiting';
/* to remove the wait state */
document.body.className = ''; // could be empty or whatever you want

You might want to add the class instead of replace the whole class attribute, what I suggest is to use something like jQuery for that.

EDIT 2019: don't use jQuery for just this, use classList

For your first problem, try using cursor: wait !important;.

For your second problem, the default cursor for elements is cursor: auto;, not cursor: default; or cursor: inherit;.

Not an answer to the question, but a way of achieving what is wanted.

Make a div (see class below) visible when you are loading.

• ensures no element is accessible and dimmed display indicates this.

• you can add an animated gif to indicate something is going on instead of the cursor.

  .loading{ position:fixed; height:100%; width:100%; left:0; top:0; cursor:wait; background:#000; opacity:.5; z-index:999}