web-dev-qa-db-ja.com

JavaScriptカーソルの変更（および再度変更）

このページには、処理に数秒かかるファンキーなデータベース処理が含まれています。それまでの間、ユーザーが飛び出してボタンをクリックし続けないように、"wait"カーソルを設定したいと思います。私は見ました

document.body.style.cursor = "wait"

これの問題は、マウスがページの本文の上にある場合にのみ機能することです（つまり、ボタンの上にある場合でも通常のポインターが表示されます）。ページのどこにマウスを置いても、待機アイコンが表示されるように設定するにはどうすればよいですか？

この質問の2番目の部分は、それが完了したら、どうすれば元に戻すことができるかということです。 "default"に戻すと、CSSで設定した"hover"カーソルの変更が上書きされるようです（したがって、指定したオブジェクトの上に置いたときに手にならないようになります）。

編集：最初の回答はうまく機能しますが、IEでは、実際にカーソルを移動するまでカーソルが更新されません（したがって、カーソルタイプの変更に気づきます）。修正？

javascriptcursor
16
Jordan

最初の問題については、cursor: wait !important;を使用してみてください。

2番目の問題の場合、要素のデフォルトカーソルはcursor: auto;であり、cursor: default;またはcursor: inherit;ではありません。

6
Hello71

私が提案するのは2つのことです：a）次のようなCSSを書く方が良い

body.waiting * { cursor: wait; }

b）JSを使用してボディクラスを処理します

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

クラス属性全体を置き換えるのではなく、クラスを追加することをお勧めします。そのためにjQueryのようなものを使用することをお勧めします。

2019年の編集：これだけにjQueryを使用するのではなく、 classList を使用してください

11
Tom Roggero

W3C.com ：で述べられているように、スタイリングはCSSを介して処理する必要があります。

CSSは、色、レイアウト、フォントなど、Webページの表示を記述するための言語です。 ... HTMLをCSSから分離することで、サイトの保守、ページ間でのスタイルシートの共有、さまざまな環境に合わせたページの調整が容易になります。これは、プレゼンテーションからの構造（またはコンテンツ）の分離と呼ばれます。

Tom Rogerroが提案したように、CSSファイルに次の行を追加します。

body.waiting * { cursor: wait; }

ただし、スクリプトでクラス名のリスト全体を上書きしないでください。 Tomは、jQueryを介してクラス名を設定することを提案しましたが、この場合、jQueryは不要です。単純なJavascriptでこれを行うことができます。

クラス名 'waiting'をドキュメント本文に追加するには：

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

ドキュメント本文からクラス名「待機中」を削除するには：

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

質問への答えではなく、求められていることを達成する方法です。

ロード時にdiv（以下のクラスを参照）を表示します。

  • 要素にアクセスできないことを確認し、淡色表示がこれを示します。

  • カーソルの代わりに何かが起こっていることを示すアニメーションGIFを追加できます。

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

4
Mahks

デフォルトでカーソルを継承しない要素（ボタンなど）は、継承するようにカーソルを設定する必要があります。

someButton.style.cursor = 'inherit';

要素のデフォルトに戻すには（強制カーソルで:hoverのようなものを壊さないように）、空の文字列に設定します。

document.body.style.cursor = '';
3
Delan Azabani

JQueryの使用に満足している場合、これを解決する簡単な方法は次を使用することです。

$('*').css('cursor','wait')

これがどれほどエレガントかはわかりませんが、私にとってはうまくいきました。

2
ShudderPig

私はすべてを試しましたが、特にボタンやリンクを含むすべての要素にカーソルを待ちたい場合は、最終的にこのjqueryが機能しました。

angular。tsファイルの先頭で定義する

_declare var $: any;_

次に、待機カーソルが必要な場所：

$('*').css('cursor','wait');

待機を削除します。

$('*').css('cursor','auto');

0
Ashish Gupta