Lesing av egenskaper fra CSS-filer i JavaScript

Egenskaper satt i en CSS-fil kan leses ved hjelp av en spesiell funksjon getComputedStyles.

La oss se hvordan dette gjøres. La oss si at vi har følgende element:

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

La oss si at følgende stiler er satt for dette elementet:

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

La oss hente en referanse til elementet i en variabel:

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

Nå sender vi referansen til det hentede elementet som en parameter til funksjonen getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

Som et resultat får vi et objekt som inneholder verdiene for CSS-egenskapene for vårt element. La oss bruke det til å lese, for eksempel, fargen:

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

Og nå bredden:

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

Og nå skriftstørrelsen:

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

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

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