Question

我从HTML页面中的一个按钮调用一个函数，然后设置属性。但它似乎没有起作用。我已经尝试更改我的DOM代码，看看是否是原因，我已确保游标是正确的位置。我看过W3，但是对于这个基本问题，对于documentElement.setAttribute找不到太多信息。

function changeCursor1() {
  document.documentElement.setAttribute("use-my-cursor", "1");
}

function changeCursor2() {
  document.documentElement.setAttribute("use-my-cursor", "2");
}

function changeCursor3() {
  document.documentElement.setAttribute("use-my-cursor", "3");
}

html[use-my-cursor="1"] {
  cursor: url(Cursor1.png);
}

html[use-my-cursor="2"] {
  cursor: url(Cursor2.png);
}

html[use-my-cursor="3"] {
  cursor: url(Cursor 3.png);
}

<button onclick="changeCursor1()" class="buttonStyle1"><img src="Cursor1.png" class="Button1"></button>
<button onclick="changeCursor2()" class="buttonStyle2"><img src="Cursor2.png" class="Button2"></button>
<button onclick="changeCursor3()" class="buttonStyle3"><img src="Cursor 3.png" class="Button3"></button>

Answer 1

如果使用默认游标，例如：

html[use-my-cursor="1"] {
  cursor: pointer;
}
html[use-my-cursor="2"] {
  cursor: help;
}
html[use-my-cursor="3"] {
  cursor: default;
}

如此处：https://codepen.io/davidballester/pen/pWmEXj，您的代码有效，因此您的问题可能与您用作游标的图像有关。您可以参考此页面以获取有关如何将自定义图像用作游标的帮助：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property

Answer 2

我必须添加自动，如：

html[use-my-cursor="1"] {
  cursor: url(Cursor1.png), auto;
}
html[use-my-cursor="2"] {
  cursor: url(Cursor2.png), auto;
}
html[use-my-cursor="3"] {
  cursor: url(Cursor 3.png), auto;
}

未调用光标更改按钮

2 个答案: