Čítanie vlastností z CSS súborov v JavaScripte

Vlastnosti nastavené v CSS súbore je možné prečítať pomocou špeciálnej funkcie getComputedStyles.

Pozrime sa, ako sa to robí. Predpokladajme, že máme nasledujúci prvok:

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

Predpokladajme, že pre tento prvok sú nastavené nasledujúce štýly:

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

Získame odkaz na prvok do premennej:

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

Teraz odkaz na získaný prvok odovzdáme ako parameter funkcie getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

Výsledkom bude objekt, obsahujúci hodnoty CSS vlastností pre náš prvok. Poďme s jeho pomocou prečítať, napríklad farbu:

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

A teraz šírku:

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

A teraz veľkosť písma:

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

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

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