如何使用 JavaScript 以编程方式更改 CSS 变量？

使用 JavaScript 更改 CSS 变量

通过 CSS 变量控制项目的颜色可以轻松设置主题。然而，以编程方式设置这些变量可能具有挑战性。

最初，尝试使用 setAttribute 和 jQuery 的 .css 方法来修改属性。然而，这些导致了错误。

解决方案：

CSS 变量可以使用这三个之一进行编辑方法：

• el.style.css文本：

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

• el.style。 setProperty:

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

• el.setAttribute:

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

The最后一种方法是最初使用的方法，但语法不正确。

演示：

此演示演示了一个定义背景颜色的 CSS 变量，该背景颜色由 JavaScript 更改2秒后：

  <style>
    html {
      --main-background-image: url(../images/starsBackground.jpg);
      --main-text-color: #4CAF50;
      --main-background-color: rgba(0,0,0,.25);
      --beta-background-color: rgba(0,0,0,.85);
    }

    body {
      background-color: var(--main-background-color);
    }
  </style>

以上是如何使用 JavaScript 以编程方式更改 CSS 变量？的详细内容。更多信息请关注PHP中文网其他相关文章！