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 қасиеттерінің мәндерін қамтитын объект аламыз. Оны қолданып, мысалы, түсті оқиық:

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;
}