Jquery css 方法没有设置 CSS3 变量答案

【问题标题】：Jquery css method does not set CSS3 variablesJquery css 方法没有设置 CSS3 变量
【发布时间】：2016-07-14 20:44:20
【问题描述】：

早安，

我正在使用 CSS3 变量来偏移项目和运行时的许多其他内容，但是 JQuery 的 css 方法忽略了任何设置 css var 的尝试。我尝试以下

    $(document).ready(function() {
        $('#testdiv').css('--bgc','rgb(0,0,255)');
    });

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="testdiv"></div>

所以理论上，div 最初应该加载为 50px x 50px 的红色框，一旦页面加载完成，就会变成蓝色框，但是 --bgc 变量在 DIV 上永远不会改变。有没有办法在 JQuery 中设置这个？

【问题讨论】：

【解决方案1】：

我找到了一个纯 JavaScript 的解决方案：

JS：

$(document).ready(function() {
    document.documentElement.style.setProperty('--bgc', 'rgb(0,0,255)');
});

CSS：

:root {
    --bgc: rgb(255,0,0);
}

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

【讨论】：

【解决方案2】：

您可以通过 vanilla javascript 设置变量

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testdiv"></div>

【讨论】：