Tähän kysymykseen ei ole yhtä vastausta, koska nämä kaksi kieltä lähestyvät muuttujien määrittämistä ja manipulointia eri tavoin. Yleisesti ottaen yksi ongelma CSS-muuttujan muuttamisessa JavaScriptillä on kuitenkin se, että nämä kaksi kieltä käyttävät eri syntaksia muuttujien ilmoittamiseen ja käyttämiseen. Lisäksi CSS-muuttujat määritellään yleensä tyylisivutasolla yksittäisten elementtien sijaan, mikä voi vaikeuttaa niiden käyttöä JavaScript-koodista.
var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");
Tämä koodirivi asettaa uuden arvon CSS-muuttujalle. Ensimmäinen rivi saa elementin, jonka tunnus on "elementti". Toinen rivi asettaa CSS-muuttujan “–muuttuja” arvoksi “new-value”.
CSS-muuttujat
CSS-muuttujat ovat loistava tapa tallentaa tietoja CSS-tiedostoihisi ilman, että sinun tarvitsee käyttää globaaleja muuttujia. Voit käyttää niitä tallentamaan tietoja, kuten nykyisen sivun leveyden tai korkeuden tai nykyisen kirjasinkoon.
Jos haluat käyttää CSS-muuttujaa JavaScript-koodissasi, sinun on ensin sisällytettävä css-ominaisuus asiakirjasi tyylisivuun. Sitten voit määrittää muuttujan avainsanalla var:
var leveys = document.getElementById("oma elementti").offsetWidth;
Voit myös käyttää css-ominaisuutta muuttaaksesi yksittäisiä arvoja:
var leveys = document.getElementById("oma elementti").offsetWidth; var korkeus = document.getElementById("oma elementti").offsetHeight;
Hallitse CSS:ää
JavaScriptissä on muutamia tapoja hallita CSS:ää. Yksi tapa on käyttää css-ominaisuutta. Tämän ominaisuuden avulla voit määrittää asiakirjan tietyn elementin tyylin.
Toinen tapa hallita CSS:ää on käyttää tyyliominaisuutta. Tämän ominaisuuden avulla voit määrittää tyylin kaikille dokumentin elementeille.
