如何使用 JavaScript 動態更改 CSS 變數？

使用 JS 編輯 CSS 變數

您正在嘗試編輯 CSS 變數以動態控制項目的樣式。雖然您已經定義了諸如 --main-background-image 和 --main-text-color 之類的變量，但在嘗試使用屬性更改它們的值時會遇到錯誤。

根本原因

您遇到的錯誤是由於錯誤地使用了setAttribute 方法來更改CSS

解決方案

編輯CSS 變數的方法有以下三種： JS:

• style.cssText:

  document.documentElement.style.cssText = "--main-background-color: red";

• style.setProperty:

  document.documentElement.style.setProperty("--main-background-color", "green");

• setAttribute （帶有「style」屬性）：

  document.documentElement.setAttribute("style", "--main-background-color: green");

在您的程式碼片段中，將註解行替換為上述方法之一以成功編輯CSS變數。

示範

考慮以下內容範例：

html {
  --main-background-color: rgba(0,0,0,.25);
}

body {
  background-color: var(--main-background-color);
}

window.onload = function() {
  setTimeout(function() {
    document.documentElement.style.cssText = "--main-background-color: red";
  }, 2000);
};

在此示範中，--main-background-color 值在頁面載入後兩秒變為紅色。

以上是如何使用 JavaScript 動態更改 CSS 變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！