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样式的对象设置一个新的值。

猜你喜欢

转载自blog.csdn.net/weixin_51157081/article/details/132691822