如何使用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'):

   • 语法：documentElement.setAttribute ('样式', "--变量名: 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中文网其他相关文章！