如何使用JavaScript正確修改CSS變數？

如何使用Style.setProperty 透過JavaScript 編輯CSS 變數

在CSS 定義顏色主題和其他設定，並且在您的整個專案中使用它們。要使用 JavaScript 動態編輯這些變量，您必須使用適當的方法。

不正確的方法：

在程式碼中，您嘗試使用 setAttribute 更新 CSS 變數。但是，此方法對於編輯 CSS 變數無效。

正確方法：

編輯 CSS 變數的正確方法有以下三種： JavaScript:

1. documentElement.style.cssText:

   • 語法：documentElement.style.cssText = "--variable-name:新值"

2. documentElement.style.setProperty:

   • 語法：documentElement. style.setProperty("- -變數名稱”, "new-value")

3. documentElement.setAttribute('style'):

   • 語法：Atdocm.set ('樣式', "--變數名稱: new-value")

範例：

將 --main-background-color變數改為紅色：

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

示範：

  
    
  

  
    <script>
      function changeColor() {
        setTimeout(() => {
          document.documentElement.style.cssText = &quot;--main-background-color: red&quot;;
        }, 2000);
      }
    </script>
  

在此示範中，背景顏色將在載入頁 2 秒後變成紅色。

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