如何使用 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中文网其他相关文章！