CSS tulajdonságok olvasása JavaScriptben

A CSS fájlban megadott tulajdonságokat elolvashatjuk a speciális getComputedStyles függvénnyel.

Nézzük meg, hogyan is történik ez. Tegyük fel, hogy van egy elemünk:

<div id="elem">
	szöveg
</div>

Tegyük fel, hogy ennek az elemnek a következő stílusai vannak megadva:

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

Szerezzük meg az elemre mutató hivatkozást egy változóba:

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

Most adjuk át a kapott elemre mutató hivatkozást paraméterként a getComputedStyles függvénynek:

let computedStyle = getComputedStyle(elem);

Ennek eredményeképpen egy objektumot kapunk, amely tartalmazza az elem CSS tulajdonságainak értékeit. Olvassuk el vele például a színt:

console.log(computedStyle.color); // kiírja 'red'

Most pedig a szélességet:

console.log(computedStyle.width); // kiírja '100px'

Most pedig a betűméretet:

console.log(computedStyle.fontSize); // kiírja '20px'

Az elemre a következő stílusok vannak megadva:

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

A gombra kattintva írja ki az elem szélességét és magasságát.

Az elemre a következő stílusok vannak megadva:

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

A gombra kattintva növelje meg az elem szélességét és magasságát kétszeresére.