javascript - 未调用光标更改按钮

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