這個問題沒有單一的答案，因為這兩種語言以不同的方式處理變量賦值和操作。 然而，一般來說，嘗試使用 JavaScript 更改 CSS 變量的一個問題是這兩種語言使用不同的語法來聲明和訪問變量。 此外，CSS 變量通常是在樣式表級別定義的，而不是在單個元素級別定義的，這使得它們很難從 JavaScript 代碼中訪問。
var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");
此代碼行正在為 CSS 變量設置新值。 第一行獲取 ID 為“element”的元素。 第二行將 CSS 變量“–variable”的值設置為“new-value”。
CSS 變量
CSS 變量是一種無需使用全局變量即可在 CSS 文件中存儲數據的好方法。 您可以使用它們來存儲信息，例如當前頁面的寬度或高度，或當前字體大小。
要在 JavaScript 代碼中使用 CSS 變量，首先需要在文檔的樣式表中包含 css 屬性。 然後，您可以使用 var 關鍵字定義變量：
var width = document.getElementById(“myElement”).offsetWidth;
您還可以使用 css 屬性訪問變量中的各個值：
var width = document.getElementById(“myElement”).offsetWidth; var height = document.getElementById(“myElement”).offsetHeight;
控制CSS
在 JavaScript 中，有幾種方法可以控制 CSS。 一種方法是使用 css 屬性。 此屬性允許您為文檔中的特定元素設置樣式。
另一種控制 CSS 的方法是使用 style 屬性。 此屬性允許您為文檔中的所有元素設置樣式。
