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:

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

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

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

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

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

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

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:

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

Dhe tani gjerësinë:

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

Dhe tani madhësinë e shkronjave:

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

Për elementin janë përcaktuar stilet e mëposhtme:

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

Në klikim të butonit, shfaq gjerësinë dhe lartësinë e elementit.

Për elementin janë përcaktuar stilet e mëposhtme:

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

Në klikim të butonit, rrit gjerësinë dhe lartësinë e elementit dy herë.