あなたが正しくウェブページのカーソル形状を変更するには

なにやら暑苦しいタイトルで失礼します。

ここにはウェブページのマウスカーソルの形状を変更するにはどうすればってことを書いてます。

「何を今さら」って感じですけど、先日、目からウロコが3つほど落ちましたので書いておきます。

小ネタといえば小ネタです。

posted with amazlet at 18.11.01

平澤隆森田壮
インプレス (2017-09-15)
売り上げランキング: 14,917

ページ全体のカーソル形状を変更する

ページ全体でマウスカーソルの形状を「待ち状態」にしたいことがありますね。勝手に手が動くぐらいの勢いで以下のようにしていましたし、ググってみてもこのように説明されてるページが多いです。

でも、これ厳密には不完全なんですよ。

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

何がダメかって言うと、WEBページのコンテンツが短い場合です。

コンテンツが少ないと、画面の下のほうにカーソル形状が変化しない領域が残ってしまうのです。

BODY要素（=document.body）はブラウザ画面の全体に広がっているとは限らないということです。スタイルシートがどうなってるかにもよりますけどね。

で、これを回避するのは実に簡単。BODYじゃなくてHTMLのスタイルを変更します。

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

document.bodyの親要素はHTMLです。document.documentElement もHTML要素を指すそうですが、ブラウザ間の実装に違いがあるかもしれないので注意が必要。

以下のボタンを押すとHTMLのカーソル形状を変化させます。

下のフォームのボタンを押すとBODYのカーソル形状をWaitカーソルに変えます（5秒後に元に戻ります）が、各コントロールの上へカーソルを持って行っても形状は変化していません。 ChromeやFirefoxではLABELのカーソル形状も変化しません（Edgeでは変化しました）。

一時的に変化させたカーソル形状を元に戻す場合、default に設定しなおしていましたが、これでは全てが矢印になっていました。

ほとんどの要素の既定の形状は矢印ですが、そうでないのもありまして。例えばテキストボックス(<input type="text"/>)は縦線みたいなのが既定の形状。

const foo = getElementById("foo");
foo.style.cursor = "wait";
（長めの処理）
foo.style.cursor = "default"; //← 全部矢印になっちゃいます

といっても、すべての要素の既定のカーソル形状を覚えておいて、それぞれ個別に元に戻すなんてナンセンス。

じゃ、どうするか。defaultじゃなくautoにすればよいのです。

const foo = getElementById("foo");
foo.style.cursor = "wait";
（長めの処理）
foo.style.cursor = "auto"; // ← 要素ごとの既定のカーソルに戻ります。

ちなみに、最近のブラウザでは initial でも元に戻っているようです。これはHTML5で規定されているのかもしれませんが、IE11では効きませんから、やっぱり auto でよいみたいです。

default / initial / auto でそれぞれ意味が違うのでしょうから、ややこしいですね。