Odczyt właściwości z plików CSS w JavaScript

Właściwości zdefiniowane w pliku CSS można odczytać za pomocą specjalnej funkcji getComputedStyles.

Spójrzmy, jak to się robi. Załóżmy, że mamy następujący element:

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

Załóżmy, że dla tego elementu zdefiniowane są następujące style:

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

Pobierzmy referencję do elementu do zmiennej:

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

Teraz przekażmy referencję do pobranego elementu jako parametr funkcji getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

W rezultacie otrzymamy obiekt, zawierający wartości właściwości CSS dla naszego elementu. Odczytywanie za jego pomocą, na przykład, koloru:

javascriptconsole.log(computedStyle.color); // wypisze 'red'

A teraz szerokość:

javascriptconsole.log(computedStyle.width); // wypisze '100px'

A teraz rozmiar czcionki:

javascriptconsole.log(computedStyle.fontSize); // wypisze '20px'

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

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