Leximi i vetive nga skedarët CSS në JavaScript

Vetitë e përcaktuara në skedarin CSS mund të lexohen duke përdorur një funksion të veçantë getComputedStyles.

Le të shohim se si bëhet kjo. Le të themi se kemi elementin e mëposhtëm:

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

Le të themi se për këtë element janë përcaktuar stilet e mëposhtme:

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

Le të marrim një referencë për elementin në një ndryshore:

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

Tani le të kalojmë referencën e elementit të marrë si parametër të funksionit getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

Si rezultat, do të marrim një objekt që përmban vlerat e vetive CSS për elementin tonë. Le të përdorim atë për të lexuar, për shembull, ngjyrën:

javascriptconsole.log(computedStyle.color); // do të shfaqë 'red'

Dhe tani gjerësinë:

javascriptconsole.log(computedStyle.width); // do të shfaqë '100px'

Dhe tani madhësinë e shkronjave:

javascriptconsole.log(computedStyle.fontSize); // do të shfaqë '20px'

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

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