Läsa egenskaper från CSS-filer i JavaScript

Egenskaper som anges i en CSS-fil kan läsas med hjälp av en speciell funktion getComputedStyles.

Låt oss se hur detta görs. Antag att vi har följande element:

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

Antag att följande stilar är angivna för detta element:

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

Låt oss hämta en referens till elementet i en variabel:

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

Nu skickar vi referensen till det erhållna elementet som en parameter till funktionen getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

Som ett resultat får vi ett objekt som innehåller värdena för CSS-egenskaperna för vårt element. Låt oss använda det för att läsa, till exempel, färgen:

javascriptconsole.log(computedStyle.color); // kommer att skriva ut 'red'

Och nu bredden:

javascriptconsole.log(computedStyle.width); // kommer att skriva ut '100px'

Och nu teckenstorleken:

javascriptconsole.log(computedStyle.fontSize); // kommer att skriva ut '20px'

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

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