Branjenje lastnosti iz CSS datotek v JavaScriptu

Lastnosti, določene v CSS datoteki, lahko preberemo s pomočjo posebne funkcije getComputedStyles.

Poglejmo, kako se to naredi. Recimo, da imamo naslednji element:

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

Recimo, da so za ta element določeni naslednji slogi:

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

Pridobimo referenco na element v spremenljivko:

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

Zdaj posredujmo referenco na pridobljeni element kot parameter funkcije getComputedStyles:

let computedStyle = getComputedStyle(elem);

Kot rezultat bomo dobili objekt, ki vsebuje vrednosti CSS lastnosti za naš element. Preberimo z njegovo pomočjo, na primer, barvo:

console.log(computedStyle.color); // izpiše 'red'

In zdaj širino:

console.log(computedStyle.width); // izpiše '100px'

In zdaj velikost pisave:

console.log(computedStyle.fontSize); // izpiše '20px'

Za element so določeni naslednji slogi:

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

Ob kliku na gumb izpišite širino in višino elementa.

Za element so določeni naslednji slogi:

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

Ob kliku na gumbo povečajte širino in višino elementa za dvakrat.