Lesing av egenskaper fra CSS-filer i JavaScript

Egenskaper satt i en CSS-fil kan leses ved hjelp av en spesiell funksjon getComputedStyles.

La oss se hvordan dette gjøres. La oss si at vi har følgende element:

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

La oss si at følgende stiler er satt for dette elementet:

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

La oss hente en referanse til elementet i en variabel:

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

Nå sender vi referansen til det hentede elementet som en parameter til funksjonen getComputedStyles:

let computedStyle = getComputedStyle(elem);

Som et resultat får vi et objekt som inneholder verdiene for CSS-egenskapene for vårt element. La oss bruke det til å lese, for eksempel, fargen:

console.log(computedStyle.color); // vil skrive ut 'red'

Og nå bredden:

console.log(computedStyle.width); // vil skrive ut '100px'

Og nå skriftstørrelsen:

console.log(computedStyle.fontSize); // vil skrive ut '20px'

Følgende stiler er satt for elementet:

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

Ved klikk på knappen, skriv ut bredden og høyden på elementet.

Følgende stiler er satt for elementet:

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

Ved klikk på knappen, øk bredden og høyden på elementet to ganger.