为什么 DOM 样式对象不直接设置 CSS 变量？

Question

我的理解是，有两种等效的方法可以通过JavaScript设置CSS规则：

#1: element.style.setProperty(propertyName, value)
#2: element.style.propertyName = value

我一直喜欢第二种更短的方法。

当涉及到CSS变量时，我发现我必须使用显式的setProperty调用：

element.style.setProperty('--varName', value)

这种方法对变量没有影响：

element.style['--varName'] = value

为什么会这样？

Answer 1

.style[propertyName]需要内部有一个属性名，但不支持像.setProperty()那样的自定义属性。如果传递--varName，则传递分配给方括号的值。

例如，如果--varName: 'blue'，通过说.style['--varName'] = value，表示将蓝色属性更改为值。由于蓝色不是属性，因此它将不起作用。

Answer 2

您需要从getComputedStyle 中检索它

请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript

要在JavaScript中使用自定义属性的值，它就像标准属性一样。

---

//从内联样式获取变量

element.style.getPropertyValue("--my var"(；

---

//从的任何位置获取变量

getComputedStyle(元素(.getPropertyValue("--my var"(；

---

//在内联样式上设置变量

element.style.setProperty("--my var"，jsVar+4(；

document.body.style.setProperty('--varName', 'see i got stored even i`m a useless value');
let root = window.getComputedStyle(document.body );
let varNameValue= root.getPropertyValue('--varName');
console.log(varNameValue);