style.setProperty-CSDN博客

本文链接：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 的值有：