CSS файлларидан JavaScriptда хусусиятларни ўқиш

CSS файлида берилган хусусиятларни getComputedStyles махсус функцияси ёрдамида ўқиш мумкин.

Бундай қандай амалга оширилишини кўрамиз. Фарз қилайлик, бизда куйидаги элемент бор:

html<div id="elem">
  матн
</div>

Ушбу элемент учун куйидаги стиллар берилган деб фарз қилайлик:

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

Элементга ҳаволани ўзгарувчига оламиз:

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

Энди олинган элементга ҳаволани getComputedStyles функциясининг параметри сифатида ўтамиз:

javascript let computedStyle = getComputedStyle(elem);

Натижада бизга элемент учун CSS хусусиятларининг қийматларини ўз ичига олган объект ҳосил бўлади. Ундан, масалан, рангни ўқиш учун foydalanaylik:

javascriptconsole.log(computedStyle.color); // 'red' чиқаради

Энди эни:

javascriptconsole.log(computedStyle.width); // '100px' чиқаради

Энди шрифт ҳажмини:

javascriptconsole.log(computedStyle.fontSize); // '20px' чиқаради

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

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