Lees eienskappe uit CSS-lêers in JavaScript

Eienskappe wat in 'n CSS-lêer gestel is, kan gelees word met behulp van 'n spesiale funksie getComputedStyles.

Kom ons kyk hoe dit gedoen word. Laat ons die volgende element hê:

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

Laat vir hierdie element die volgende style gestel wees:

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

Kry 'n verwysing na die element in 'n veranderlike:

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

Stuur nou die verwysing na die verkrygde element as 'n parameter aan die funksie getComputedStyles:

let computedStyle = getComputedStyle(elem);

As gevolg sal ons 'n objek kry wat die CSS-eienskapwaardes vir ons element bevat. Kom ons lees daarmee byvoorbeeld, die kleur:

console.log(computedStyle.color); // sal 'red' uitvoer

En nou die breedte:

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

En nou die lettergrootte:

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

Vir die element is die volgende style gestel:

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

Met 'n klik op die knoppie, voer die breedte en hoogte van die element uit.

Vir die element is die volgende style gestel:

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

Met 'n klik op die knoppie, vergroot die breedte en hoogte van die element twee keer.