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:

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

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

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

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

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

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

javascript 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:

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

Most pedig a szélességet:

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

Most pedig a betűméretet:

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

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

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