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

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

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

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

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

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

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

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

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

A nyní šířku:

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

A nyní velikost písma:

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

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

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