How to change cursor for the whole document (not only within the body) via JavaScript?

Question

In the way it's cross-browser, using JavaScript only.

Answer 1

I think the issue you're having is that the body element isn't filling the viewport because there isn't much content on the page (this is especially true on IE). You can force it to fill the viewport with CSS:

html, body {
    height: 100%;
    cursor: pointer;
}

...which then ensures the cursor is a pointer anywhere in the viewport.

Edit: And having ensured that the body element fills the viewport, you can use the style object on the document.body to set the cursor from JavaScript. So to change it to a crosshair:

document.body.style.cursor = 'crosshair';

If you can't apply CSS at all in advance, this seems to work:

document.documentElement.style.height = "100%";
document.body.style.height = "100%";
document.body.style.cursor = "pointer";