我想使用 JavaScript 脚本来更改网站上的鼠标指针。
最好用 CSS 来完成,但我的要求是一个可以分发给很多人以嵌入到他们网站的头部部分的脚本。
通过 CSS,可以通过以下方式进行操作
html
{
cursor: *cursorurl*
}
如何在 JavaScript 中做同样的事情?
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 不管用除非您在成像光标后指定默认光标!
其他光标关键字 http://www.w3schools.com/CSSref/pr_class_cursor.asp
另请记住,IE6 仅支持.cur 和 .ani 游标 http://www.javascriptkit.com/dhtmltutors/csscursors.shtml.
如果光标没有变化:如果您相对于光标位置移动光标下的元素(例如元素拖动),则必须强制重绘该元素:
// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';
// in jquery
$('#parentOfElementToBeRedrawn').hide().show(0);
工作样本:
document.getElementsByTagName("body")[0].style.cursor = "url('http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur'), auto";
div {
height: 100px;
width: 1000px;
background-color: red;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
hello with a fancy cursor!
</div>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)