我有这些CSS变量来控制我的项目的颜色,所以我可以做主题。
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);
}
然而,无论我如何尝试更改属性(两个注解行分别尝试),最接近的结果是返回无效属性。
function loadTheme() {
var htmlTag = document.getElementsByTagName("html");
var yourSelect = document.getElementById( "themeSelect" );
var selectedTheme = ( yourSelect.options[ yourSelect.selectedIndex ].value );
// htmlTag[0].setAttribute('--main-text-color', '#FFCF40');
// $("html").css("--main-text-color","#FFCF40");
}
8条答案
按热度按时间jjhzyzn01#
原来可以使用
el.style.cssText
属性或el.style.setProperty
或el.setAttribute
方法更改CSS变量。在您的代码段中,el.setAttribute
使用不正确,这导致了您遇到的错误。这里是正确的方法:或者是
或者是
Demo
下面的演示使用CSS变量定义了一个背景色,然后在加载后2秒使用JS代码段更改它。
显然,这只适用于支持CSS变量的浏览器。
cedebl8k2#
如果您使用
:root
:它将是documentElement。
e3bfsja23#
原生解决方案
获取/设置CSS3变量的标准方法是
.setProperty()
和.getPropertyValue()
。如果你的变量是全局变量(在
:root
中声明),你可以使用下面的方法来获取和设置它们的值。然而getter只会返回var的值,如果已经设置,使用
.setProperty()
。如果已经通过CSS声明进行了设置,则会返回undefined
。在这个例子中检查它:为了避免这种意外行为,您必须在调用
.getPropertyValue()
之前使用getComputedStyle()
方法。getter将看起来像这样:在我看来,访问CSS变量应该更简单,快速,直观和自然...
我个人的做法
我已经实现了
CSSGlobalVariables
一个很小的(<3 kb)javascript模块,它可以自动检测并打包成一个Object,文档中所有活跃的CSS全局变量,为了更容易访问和操作。应用于Object属性的任何更改都会自动转换为CSS变量,反之亦然。
支持:https://github.com/colxi/css-global-variables
wfypjpf44#
您可以简单地使用标准方式设置任意CSS属性:
setProperty
qvtsj1bj5#
对于任何正在努力解决它的人来说,如果你的CSS变量是一个句子,你需要用qoutes Package 它。
这不起作用:
但这个可以:
jexiocij6#
您可以添加如下内容(不使用类变量)
pgky5nke7#
在CSS中定义包含各种主题样式(
.theme1 {...}
,.theme2 {...}
等)的类,然后根据所选的值使用JS更改类可能会更容易。jogvjijk8#
javascript中没有::占位符选择器,但是绕过这个方法,可以在样式表中声明一个css变量,这个变量可以用于DOM,并且可以使用javascript操作。
举个例子。