CSS-tiedostojen ominaisuuksien lukeminen JavaScriptissä

CSS-tiedostossa asetettuja ominaisuuksia voidaan lukea erityisfunktion getComputedStyles avulla.

Katsotaan kuinka se tehdään. Oletetaan, että meillä on seuraava elementti:

html<div id="elem">
  teksti
</div>

Oletetaan, että tälle elementille on asetettu seuraavat tyylit:

css#elem {
  width: 100px;
  color: red;
  font-size: 20px;
}

Haetaan viite elementtiin muuttujaan:

javascriptlet elem = document.querySelector('#elem');

Nyt välitetään viite haettuun elementtiin parametrina funktiolle getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

Tuloksena saamme objektin, joka sisältää CSS-ominaisuuksien arvot elementillemme. Luetaan sen avulla esimerkiksi väri:

javascriptconsole.log(computedStyle.color); // tulostaa 'red'

Ja nyt leveys:

javascriptconsole.log(computedStyle.width); // tulostaa '100px'

Ja nyt fontin koko:

javascriptconsole.log(computedStyle.fontSize); // tulostaa '20px'

css#elem {
  width: 200px;
  height: 200px;
}

css#elem {
  width: 200px;
  height: 200px;
}