為什么 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

這是因為 DOM 的 Style 函數只理解 HTML 屬性而不理解 CSS 屬性。 定義 CSS 屬性在樣式的 setProperty 函數中列出。

Answer 2

.style[propertyName]需要內部的屬性名稱，但不支持像.setProperty()那樣的自定義屬性。 如果傳遞--varName ，則傳遞分配給括號的值。

例如，如果--varName: 'blue' ，通過說.style['--varName'] = value ，你是說將 blue 屬性更改為 value。 由於blue 不是屬性，因此它不起作用。

Answer 3

您需要從getComputedStyle 中檢索它

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

在 JavaScript 中使用自定義屬性的值，就像標准屬性一樣。

---

// 從內聯樣式中獲取變量

element.style.getPropertyValue("--my-var");

---

// 從任何地方獲取變量

getComputedStyle(element).getPropertyValue("--my-var");

---

// 設置內聯樣式的變量

element.style.setProperty("--my-var", jsVar + 4);

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