JQuery CSS-Methode setzt keine CSS3 Variablen

Question

Guten Tag,

Ich arbeite mit CSS3 Variablen Artikel und viele andere Dinge im laufenden Betrieb aber JQuery CSS-Methode Offset ignoriert jeden Versuch eine CSS-var Einstellung. Ich versuche, die folgende

$(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>

Also in der Theorie die div zunächst als 50px 50px von roten Feld und sobald das Laden der Seite abgeschlossen ist Änderung in einem blauen Kasten jedoch die --bgc laden sollte Variable wird nie am DIV geändert. Gibt es eine Möglichkeit, dies in JQuery zu setzen?

Answer 1

fand ich eine reine JavaScript-Lösung:

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

Codepen: http://codepen.io/theblindprophet/pen/yJpZNb

Referenz: Variables why should you care?

Answer 2

Sie können variabel über Vanille-Set 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>