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:

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

Acha kwa kipengele hiki kuwe na mitindo ifuatayo iliyowekwa:

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

Tupate kiungo kwenye kipengele kwa kutumia kigezo:

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

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

javascript 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:

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

Na sasa upana:

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

Na sasa ukubwa wa herufi:

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

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

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