style.setProperty

最新推荐文章于 2024-04-27 16:48:56 发布

前端小蜜蜂w

最新推荐文章于 2024-04-27 16:48:56 发布

阅读量1k

点赞数 19

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_61840359/article/details/134859613

版权

const root = document.querySelector(":root");
root.style.setProperty("--mainColor", maincolor);

首先，通过方法 document.querySelector(":root") 获取文档中的根元素。:root 是 CSS 伪类选择器，代表文档的根元素，通常是 <html> 元素。

然后，使用 setProperty 方法来设置根元素的 CSS 变量，具体的设置包括两个参数：

第一个参数是要设置的 CSS 变量的名称，以 -- 开头，比如 --mainColor。
第二个参数是要设置的 CSS 变量的值，可以是任意有效的 CSS 值，比如 maincolor 变量的值。

const root = document.querySelector(":root");
const maincolor = "#ff0000";

root.style.setProperty("--mainColor", maincolor);

将文档的根元素的 --mainColor CSS 变量设置为 #ff0000，这样在整个文档中可以使用 var(--mainColor) 来引用该变量，并将元素的颜色设置为这个值

下面来说一下 setProperty ，是HTMLElement 的方法，用于设置元素的 CSS 样式属性

element.style.setProperty(property, value, priority);
element：要设置样式属性的元素。
property：要设置的样式属性的名称。
value：要设置的样式属性的值。
priority：可选参数，用于设置样式属性的优先级。


将元素的 background-color 样式属性设置为红色
const element = document.getElementById('my-element');
element.style.setProperty('background-color', 'red');



将元素的 background-color 样式属性设置为红色，并且将优先级设置为 important
const element = document.getElementById('my-element');
element.style.setProperty('background-color', 'red', 'important');

priority 的值有：

''（空字符串）：默认值，表示没有设置优先级。
'important'：表示将该样式属性设置为重要属性，具有最高优先级。
'initial'：将样式属性设置为初始值，优先级低于其他规则。
'inherit'：将样式属性设置为继承值，优先级低于其他规则。

前端小蜜蜂w

关注

19
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
style.setProperty

下面来说一下 setProperty ，是HTMLElement 的方法，用于设置元素的 CSS 样式属性。是 CSS 伪类选择器，代表文档的根元素，通常是。来引用该变量，并将元素的颜色设置为这个值。，这样在整个文档中可以使用。获取文档中的根元素。
复制链接

扫一扫

style.setProperty

“相关推荐”对你有帮助么？