Lees eienskappe uit CSS-lêers in JavaScript

Eienskappe wat in 'n CSS-lêer gestel is, kan gelees word met behulp van 'n spesiale funksie getComputedStyles.

Kom ons kyk hoe dit gedoen word. Laat ons die volgende element hê:

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

Laat vir hierdie element die volgende style gestel wees:

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

Kry 'n verwysing na die element in 'n veranderlike:

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

Stuur nou die verwysing na die verkrygde element as 'n parameter aan die funksie getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

As gevolg sal ons 'n objek kry wat die CSS-eienskapwaardes vir ons element bevat. Kom ons lees daarmee byvoorbeeld, die kleur:

javascriptconsole.log(computedStyle.color); // sal 'red' uitvoer

En nou die breedte:

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

En nou die lettergrootte:

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

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

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