首页 > web前端 > css教程 > 如何使用 JavaScript 以编程方式更改 CSS 变量?

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

Barbara Streisand
发布: 2024-12-10 18:35:14
原创
742 人浏览过

How Can I Programmatically Change CSS Variables with JavaScript?

使用 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秒后:

<html>
<head>
  <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>
</head>
<body onload="setTimeout(function() {
    document.documentElement.style.cssText = '--main-background-color: red';
  }, 2000);">
</body>
</html>
登录后复制

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板