CSS muuttujien muuttaminen JavaScriptin avulla

Muuta muuttujia JavaScriptillä

CSS-varioiden avulla voidaan käyttää DOM:ia, mikä tarkoittaa, että voit muuttaa niitä JavaScriptin avulla.

Tämä esimerkki näyttää, miten luodaan skripti näyttämään ja muuttamaan edellisellä sivulla käytettyä --blue muuttujaa. Tällä hetkellä, jos et ole tutustunut JavaScriptiin, älä huoli. Voit oppia lisää JavaScriptistä JavaScript-opetusohjelmistostamme:

Esimerkki

<script>
// Hae juurielementti
var r = document.querySelector(':root');
// Luo funktio muuttujien arvojen hakemiseksi
function myFunction_get() {
  // Hae juurin tyylit (ominaisuudet ja arvot)
  var rs = getComputedStyle(r);
  // Huomauta --blue muuttujan arvoa
  huomauta("Arvon --blue on: " + rs.getPropertyValue('--blue'));
}
// Luo funktio, joka luo muuttujien arvon asettamisen
function myFunction_set() {
  // Aseta muuttujan --blue arvo toiseen arvoon (tässä tapauksessa "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

Funktio
var() 49.0 15.0 31.0 9.1 36.0

CSS var() funktio

Funktio Kuvaus
var() Lisää CSS muuttujien arvot.