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:

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

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

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

Haetaan viite elementtiin muuttujaan:

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

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

let computedStyle = getComputedStyle(elem);

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

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

Ja nyt leveys:

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

Ja nyt fontin koko:

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

Elementille on asetettu seuraavat tyylit:

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

Painiketta klikkaamalla tulosta elementin leveys ja korkeus.

Elementille on asetettu seuraavat tyylit:

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

Painiketta klikkaamalla kaksinkertaista elementin leveys ja korkeus.