CSS failos norādīto īpašību lasīšana JavaScript

Īpašības, kas norādītas CSS failā, var nolasīt, izmantojot speciālu funkciju getComputedStyles.

Paskatīsimies, kā tas tiek darīts. Pieņemsim, ka mums ir šāds elements:

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

Pieņemsim, ka šim elementam ir noteikti šādi stili:

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

Iegūsim atsauci uz elementu mainīgajā:

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

Tagad nodosim atsauci uz iegūto elementu kā parametru funkcijai getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

Rezultātā mēs iegūsim objektu, kurs satur CSS īpašību vērtības mūsu elementam. Izmantosim to, lai nolasītu, piemēram, krāsu:

javascriptconsole.log(computedStyle.color); // izvadīs 'red'

Un tagad platumu:

javascriptconsole.log(computedStyle.width); // izvadīs '100px'

Un tagad fonta izmēru:

javascriptconsole.log(computedStyle.fontSize); // izvadīs '20px'

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

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