web-dev-qa-db-ja.com

JavaScriptを使用してマウスポインターを変更する

JavaScriptを使用して、ウェブサイト上のマウスポインターを変更するスクリプトを使用したかった。 CSSを使用する方が適切ですが、私の要件は、多くの人に配布して自分のWebサイトのヘッドセクションに埋め込むことができるスクリプトです。 CSSにより、これは

html
{
cursor: *cursorurl*
}

JavaScriptで同じことをする方法は？

javascriptcursorcustom-cursor
31
Cipher

Javascriptはcssの操作に非常に優れています。

 document.body.style.cursor = *cursor-url*;
 //OR
 var elementToChange = document.getElementsByTagName("body")[0];
 elementToChange.style.cursor = "url('cursor url with protocol'), auto";

またはjqueryを使用：

$("html").css("cursor: url('cursor url with protocol'), auto");

Firefoxは、イメージ化されたカーソルの後にデフォルトのカーソルを指定しない限り機能しません！

その他のカーソルキーワード

IE6は 。curおよび.aniカーソル のみをサポートしていることも覚えておいてください。

カーソルが変わらない場合：カーソル位置に関連してカーソルの下の要素を移動する場合（要素のドラッグなど）、強制的に要素に再描画します。

// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';
// in jquery
$('#parentOfElementToBeRedrawn').hide().show(0);

working sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>First jQuery-Enabled Page</title>
<style type="text/css">

div {
    height: 100px;
    width: 1000px;
    background-color: red;
}

</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script></head>
<body>
<div>
hello with a fancy cursor!
</div>
</body>
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.cursor = "url('http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur'), auto";


</script>
</html>
38
Gordon Gustafson
document.body.style.cursor = 'cursorurl';
13
Wally Atkins

このページを見てください： http://www.webcodingtech.com/javascript/change-cursor.php 。スタイルからカーソルにアクセスできるようです。このページはページ全体で行われていることを示していますが、子要素も同様に機能すると確信しています。

document.body.style.cursor = 'wait';
8
Brian Ball