Čtení vlastností ze souborů CSS v JavaScriptu

Vlastnosti nastavené v souboru CSS lze přečíst pomocí speciální funkce getComputedStyles.

Podívejme se, jak se to dělá. Předpokládejme, že máme následující prvek:

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

Předpokládejme, že pro tento prvek jsou nastaveny následující styly:

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

Získáme odkaz na prvek do proměnné:

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

Nyní předáme odkaz na získaný prvek jako parametr funkce getComputedStyles:

let computedStyle = getComputedStyle(elem);

Výsledkem získáme objekt, obsahující hodnoty CSS vlastností pro náš prvek. Pojďme s jeho pomocí přečíst, například barvu:

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

A nyní šířku:

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

A nyní velikost písma:

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

Pro prvek jsou nastaveny následující styly:

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

Po kliknutí na tlačítko vypište šířku a výšku prvku.

Pro prvek jsou nastaveny následující styly:

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

Po kliknutí na tlačítko zvětšete šířku a výšku prvku na dvojnásobek.