Kusoma Sifa Kutoka kwa Faili za CSS katika JavaScript

Sifa zilizowekwa kwenye faili ya CSS, zinaweza kusomwa kwa kutumia kitendo maalum getComputedStyles.

Tuangalie jinsi hii inafanyika. Acha tuwe na kipengele kifuatacho:

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

Acha kwa kipengele hiki kuwe na mitindo ifuatayo iliyowekwa:

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

Tupate kiungo kwenye kipengele kwa kutumia kigezo:

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

Sasa tupitishe kiungo kwenye kipengele kilichopatikana kama kigezo cha kitendo getComputedStyles:

let computedStyle = getComputedStyle(elem);

Kwa matokeo tutapata kitu, kinachokuwa na thamani za sifa za CSS kwa kipengele chetu. Wacha tumia hii kusoma, kwa mfano, rangi:

console.log(computedStyle.color); // itatoa 'red'

Na sasa upana:

console.log(computedStyle.width); // itatoa '100px'

Na sasa ukubwa wa herufi:

console.log(computedStyle.fontSize); // itatoa '20px'

Kwa kipengele kimewekwa mitindo ifuatayo:

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

Kwa kubofya kitufe toa upana na urefu wa kipengele.

Kwa kipengele kimewekwa mitindo ifuatayo:

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

Kwa kubofya kitufu ongeza upana na urefu wa kipengele mara mbili.