Læsning af egenskaber fra CSS-filer i JavaScript

Egenskaber defineret i en CSS-fil kan læses ved hjælp af en speciel funktion getComputedStyles.

Lad os se, hvordan det gøres. Lad os antage, at vi har følgende element:

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

Lad os antage, at følgende stilarter er defineret for dette element:

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

Lad os hente en reference til elementet i en variabel:

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

Nu sender vi referencen til det hentede element som en parameter til funktionen getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

Som et resultat får vi et objekt, der indeholder værdierne for CSS-egenskaber for vores element. Lad os bruge det til at læse, for eksempel, farven:

javascriptconsole.log(computedStyle.color); // vil udskrive 'red'

Og nu bredden:

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

Og nu skriftstørrelsen:

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

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

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