通过JavaScript访问CSS自定义属性（也称CSS变量）

如何使用JavaScript（普通或jQuery）获取和设置CSS自定义属性（通过样式表中的

var（…）

访问的属性）

以下是我失败的尝试：单击按钮可更改通常的

字体重量

属性，但不能更改自定义的

--mycolor

属性：

正文{
--霉色：黄色；
背景色：var（--mycolor）；
}
让我们尝试将此文本设置为粗体，背景设置为红色

普通JS
jQuery
函数plain_js（）{
document.body.style['font-weight']='bold'；
document.body.style['--mycolor']='red'；
};
函数jQuery_389;（）{
$（'body'）.css（'font-weight'，'bold'）；
$（'body'）.css（'--mycolor'，'red'）；
}

您可以使用

document.body.style.setProperty（'--name'，value）：

更多信息。
以下示例说明了如何使用JavaScript或jQuery更改背景，利用自定义CSS属性（也称为CSS变量）（请参阅更多）。另外：该代码还指示如何使用CSS变量更改字体颜色


函数plain_js（）{
//需要DOM将--mycolor设置为其他颜色
d、 body.style.setProperty（'--mycolor'，red'）；
//获取CSS变量。。。
bodyStyles=window.getComputedStyle（document.body）；
fontcolor=bodyStyles.getPropertyValue（'--font color'）；//获取
//…将主体元素重置为自定义属性的新值
d、 body.style.color=fontcolor；
d、 g（“段落”）。样式[“字体重量”]=“粗体”；
this.style.display=“无”；
};
函数jQuery_389;（）{
$（“body”）.get（0）.style.setProperty（'-mycolor'，'#f3f'）；
$（“body”）.css（“color”，fontcolor）；
$（“#para”）.css（“fontwweight”、“bold”）；
$（this.css（“显示”、“无”）；
}
var bodyStyles=null；
var fontcolor=“”；
var d=文件；
d、 g=d.getElementById；
d、 g（“红色”）。添加文本列表（“单击”，普通）；
d、 g（“粉色”）。添加了EventListener（“单击”，jQuery）
：根目录{
--字体颜色：白色；
--霉色：黄色；
}
正文{
背景色：var（--mycolor）；
颜色：#090；
}
#帕拉{
字体：90%Arial，Helvetica；
字体大小：正常；
}
#红色的{
背景：红色；
}
#粉红的{
背景：#f3f；
}

让我们尝试将背景设置为红色或粉红色，并将文本更改为白色和粗体
红色
粉色
本机解决方案
获取/设置CSS3变量的标准方法是
.setProperty（）
和
.getPropertyValue（）

如果变量是全局变量（在
：root
中声明），则可以使用以下命令获取和设置它们的值

// setter
document.documentElement.style.setProperty('--myVariable', 'blue');
// getter
document.documentElement.style.getPropertyValue('--myVariable');

但是，如果使用
.setProperty（）设置了变量，getter将只返回变量的值。
如果已通过CSS声明设置，则将返回
未定义的
。在本例中选中它：


let c=document.documentElement.style.getPropertyValue（'--myVariable'）；
警报（--myVariable的值为：‘+（c？c:‘未定义’）
：根{--myVariable:red；}
div{背景色：var（--myVariable）；}
由--myVariable
设置的红色背景在CSS中受支持吗？@Gothdo是的。然而，它仍然是实验性的。此外，它的目的不是为了您在运行时更改的内容，而是为了可维护性。如果你想要改变，你可以看看TL；DR:
getComputedStyle（document.documentElement）.getPropertyValue（'--x'）
集合是否也会将CSS中对该变量的所有引用更新为？它可以用作全局变量，无需加载新文件即可更改。对于希望在
-标记上而不是正文上获取或设置属性的任何人，CSF：您可以使用
document.documentElement
访问它。shadow中的样式如何root？我喜欢在需要操作JS中的变量时使用它，但在我的例子中，我只需要获取值。因此，我不需要完整的助手库，只需要一个返回
getComputedStyle（document.documentElement，null）.getPropertyValue（varStr）的助手函数我知道这是一个较老的问题，但是如何将样式表中的实际变量（--varName）动态更改为所选的值呢？如果我想为用户提供样式表，我希望用户看到实际的颜色名称或十六进制值，而不是var（--varName）。寻找example@Dave.Q在这种情况下，您可以使用Sass或更少，否则我看不到如何公开这些值directly@connexo确切地它按预期输出未定义的
。请再次阅读代码段之前的注释。
// setter
document.documentElement.style.setProperty('--myVariable', 'blue');
// getter
document.documentElement.style.getPropertyValue('--myVariable');