Web前端之JavaScript动态添加important样式、禁止页面出现光标、动态修改css值、样式最高优先级、隐藏鼠标光标、区别、setAttribute、setProperty、cssText

智码帮MJ682517

已于 2024-08-30 18:52:08 修改

阅读量2.1k

点赞数 9

分类专栏： Web前端 Style JavaScript 文章标签： javascript css 前端 web前端 web

于 2023-09-05 15:02:50 首次发布

本文链接：https://blog.csdn.net/weixin_51157081/article/details/132691822

版权

Web前端同时被 3 个专栏收录

369 篇文章 6 订阅

订阅专栏

JavaScript

222 篇文章 6 订阅

订阅专栏

Style

93 篇文章 0 订阅

订阅专栏

无效写法

此写法不生效。

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。请注意，这将覆盖元素上的任何现有样式，所以确保它不会影响到其他样式规则。

动态修改el-upload的样式值(示例)

document.querySelector(".el-upload").style.setProperty("border", "1px dashed transparent");
这里也可以使用id精确设置属性值，删除属性无效，只能重设属性值，亲测有效。在需要设置的函数/方法里面添加此代码即可。

setAttribute与setProperty的区别

概述
setAttribute和setProperty用于在DOM元素上操作属性和属性值的两种不同方法。它们的主要区别在于它们处理属性和属性的方式。

setAttribute
用法：setAttribute(attributeName, value)。
作用：设置或更新元素的HTML属性。如果该属性不存在，它会被添加到元素上。
用在HTML属性上：setAttribute操作的是标准的HTML属性，例如，id、class、src和href等。
类型转换：setAttribute会将传入的值转换为字符串。例如，如果传入一个数字，它会将其转换为字符串后再设置。

示例
var element = document.getElementById("myElement");

// 设置或更改id属性
element.setAttribute("id", "newId");
// 添加或更改自定义data属性
element.setAttribute("data-custom", "customValue");
setProperty
用法：element.style.setProperty(propertyName, value, priority)。
作用：主要用于操作CSS样式属性。通过setProperty，可以设置样式属性的值，还可以指定优先级(例如，important)。
用在CSS样式上：setProperty主要用于直接操作CSS样式规则，例如，color、background-color和font-size等。
不转换类型：setProperty直接应用传入的值，而不进行类型转换。

示例
var element = document.getElementById("myElement");

// 设置背景颜色
element.style.setProperty("background-color", "red");
// 设置字体大小并应用 important 优先级
element.style.setProperty("font-size", "20px", "important");
总结
1、setAttribute主要用于设置和操作HTML元素的属性，适用于标准的HTML属性。
2、setProperty主要用于操作CSS样式属性，适用于样式规则的设置和管理。
它们分别适用于不同的场景，因此在开发时需要根据需要选择合适的方法。

setAttribute

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

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