jquery css方法不设置CSS3变量

Question

你好，

我正在使用 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 中设置它吗？

Answer 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;
}

代码笔:http://codepen.io/theblindprophet/pen/yJpZNb

引用:Variables why should you care?