Jquery css方法不设置CSS3变量

你好

我在运行时使用CSS3变量来抵消项和许多其他内容，但是JQuery的css方法忽略了任何设置css变量的尝试

$（文档）.ready（函数（）{
$（'testdiv'）.css（'-bgc'，'rgb（0,0255）'）；
});
div
{
--bgc:rgb（255,0,0）；
背景色：var（--bgc）；
宽度：50px；
高度：50px；
}
我找到了一个纯JavaScript解决方案：

JS:

CSS:

代码笔：

参考：
您可以通过javascript设置变量

$(document).ready(function() {
  $('#testdiv')[0].style.setProperty('--bgc', 'rgb(0, 0,255)');
});


$（文档）.ready（函数（）{
$（'#testdiv'）[0].style.setProperty（'-bgc'，'rgb（0,0255'）；
});
div
{
--bgc:rgb（255,0,0）；
背景色：var（--bgc）；
宽度：50px；
高度：50px；
}

@AnujKumar阅读title@AnujKumar这是一个css变量，请参阅文章中添加的css类。@UgoT。阅读标题并使用GoogI ask，因为我从未听说过它。请改为尝试背景色。尝试作为属性$（'#testdiv'）.attr（“style”，“--bgc:rgb（0,0255）”）；答案中的vanilla javascript在哪里？
$（“#testdiv”）
不返回数组。你不应该需要
[0]
@Jai这里：
.style.setProperty（）
@theblindprophet在没有
[0]
@user1636505的情况下尝试它，但这不是普通的javascript。您仍在jquery中，正在将jq对象转换为dom节点。@Jai我使用了jquery，以便OP可以看到差异感谢，这似乎很有效，我希望能够在jquery集合上设置它，但我使用$（）。每个（）都必须这样做
:root {
    --bgc: rgb(255,0,0);
}

div {
    background-color:var(--bgc);
    width:50px;
    height:50px;
}

$(document).ready(function() {
  $('#testdiv')[0].style.setProperty('--bgc', 'rgb(0, 0,255)');
});