Question

我希望javascript中的一个函数在单击按钮时将光标更改为png图像。这是我在html和javascript中使用的代码，但显然它不起作用，有人可以帮助我吗？

<form>
    <input type="button"
           onclick="changeCursor()"
           value="click here"
    />
</form>

...

function changeCursor() {
    cursor.style = "myImage.png"
}

Answer 1

单击按钮时，添加cursor属性。

＆＃13;

var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  document.body.style.cursor = 'url(http://dummyimage.com/40x40/000/fff), auto';
})

＆＃13;

html, body {
  width: 100%;
  height: 100%;
  background-color: coral;
  margin: 0 auto;
}

＆＃13;

<input id="btn" type="button" value="click here" />

＆＃13;

Answer 2

如果你愿意，你也可以使用JQuery：

HTML：

<form>
    <input type="button" value="click here" />
</form>

CSS：

body.newcursor
{
    cursor: url(http://media.tumblr.com/tumblr_lqs4qoKE1V1qfoi4t.png), auto;
}

JQuery的：

$(document).ready(function(){
    $('input').click(function(){
        $('body').addClass('newcursor');
    });        
});

示例：http://jsfiddle.net/jx6j6uho/2/

Answer 3

您可以通过将CSS设置为cursor: url(myImage.png), auto来影响光标。您可以将此分配给document.body.style，但如果您不小心，则会覆盖那里的任何内容。更好的方法是将它分配给CSS类，并将该类附加到<body>元素。

试图在javascript中更改光标

3 个答案: