JavaScript动态添加!important样式、style最高优先级、隐藏鼠标光标、禁止页面出现光标、setProperty、cssText、setAttribute

---

无效写法

此写法不生效。

document .body.style.cursor = 'none !important';

---

有效写法(一)

document.body.style.setProperty('cursor', 'none', 'important');

这会将cursor属性的值设置为none并添加!important标志，确保它具有最高的优先级，无法通过其他样式覆盖。这对于在网页上隐藏鼠标光标非常有用。

---

有效写法(二)

document.body.style.cssText = 'cursor: none !important;';

这将通过style属性为元素添加一个样式规则，将光标属性设置为none并使用!important进行标记。

---

请注意，使用!important应该谨慎，因为它会覆盖其他可能应用于相同属性的样式规则，可能会导致样式不受预期的影响。只有在确实需要强制使用!important时才应该使用它，最好的做法是避免在样式中频繁使用!important。

---

有效写法(三)

document.body.setAttribute("style", "cursor: none !important;");

这将在指定的元素上设置style属性，将cursor属性设置为none !important。请注意，这将覆盖元素上的任何现有样式，所以确保它不会影响到其他样式规则。

---

setAttribute

w3school

setAttribute()方法添加指定的属性，并为其赋指定的值。
如果这个指定的属性已存在，则仅设置/更改值。
注意：HTML文档的HTMLElement对象还定义了对应所有标准HTML属性的JavaScript属性。因此，只有您需要设置非标准属性的时候，才需要使用该方法。

---

MDN

设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。
要获取某个属性当前的值，可使用getAttribute()；要删除某个属性，可使用removeAttribute()。

---

cssText

w3school

cssText属性设置或返回元素的行内（内联）样式声明的值。

---

MDN

cssText返回样式规则所包含的实际文本。想要能够动态的设置一个样式表规则，查看使用动态样式信息。

---

setProperty

W3school

setProperty()方法在CSS声明块中设置新的CSS属性，或修改现有的属性。

---

MDN

CSSStyleDeclaration.setProperty()方法接口为一个声明了CSS样式的对象设置一个新的值。