如何使用 JavaScript 以编程方式更改 CSS 变量？
- Barbara Streisand原创
- 2024-12-10 18:35:14687浏览
使用 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中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn