使用 JavaScript 更改鼠标指针
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4564251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the mouse pointer using JavaScript
提问by Cipher
I wanted to use a script to change the mouse pointer on my website using JavaScript. It's better done by CSS but my requirement is of a script that can be distributed to many people to embed in the head section of their websites. Through CSS, this can be manipulated by
我想使用脚本来使用 JavaScript 更改我网站上的鼠标指针。最好通过 CSS 来完成，但我的要求是一个脚本，可以分发给许多人以嵌入他们网站的 head 部分。通过CSS，这可以通过
html
{
cursor: *cursorurl*
}
How to do the same in JavaScript?
如何在 JavaScript 中做同样的事情？
回答by Gordon Gustafson
Javascript is pretty good at manipulating css.
Javascript 非常擅长处理 css。
document.body.style.cursor = *cursor-url*;
//OR
var elementToChange = document.getElementsByTagName("body")[0];
elementToChange.style.cursor = "url('cursor url with protocol'), auto";
or with jquery:
或使用 jquery：
$("html").css("cursor: url('cursor url with protocol'), auto");
Firefox will not workunless you specify a default cursor after the imaged one!
除非您在图像后指定默认光标，否则Firefox将无法工作！
Also remember that IE6 only supports .cur and .ani cursors.
还要记住，IE6 只支持.cur 和 .ani 游标。
If cursor doesn't change:In case you are moving the element under the cursor relative to the cursor position (e.g. element dragging) you have to force a redraw on the element:
如果光标没有改变：如果您相对于光标位置移动光标下的元素（例如元素拖动），您必须强制重绘元素：
// 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>
回答by Wally Atkins
document.body.style.cursor = 'cursorurl';
回答by Brian Ball
Look at this page: http://www.webcodingtech.com/javascript/change-cursor.php. Looks like you can access cursor off of style. This page shows it being done with the entire page, but I'm sure a child element would work just as well.
看看这个页面：http: //www.webcodingtech.com/javascript/change-cursor.php。看起来您可以从样式中访问光标。这个页面显示它是用整个页面完成的，但我相信子元素也能正常工作。
document.body.style.cursor = 'wait';
回答by Wally Atkins
With regards to @CrazyJugglerDrummer second method it would be:
关于@CrazyJugglerDrummer 第二种方法是：
elementsToChange.style.cursor = "http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur";
