JavaScript-de CSS faýllaryndan häsiýetleri okamak

CSS faýlynda berlen häsiýetleri getComputedStyles diýen ýörite funksiýa ýardamynda okap bolýar.

Geliň, munuň nähili ýerine ýetirilýändigine göz aýlalyň. Bizde aşakdaky element bar diýeliň:

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

Bu element üçin aşakdaky stiller berlen diýeliň:

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

Elemente çykgyt alarys we ony üýtgeýjide saklarys:

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

Indi alynan elemente çykgydy getComputedStyles funksiýasynyň parametri hökmünde geçirýäris:

javascript let computedStyle = getComputedStyle(elem);

Netijede biz elementimiz üçin CSS häsiýetleriniň bahalaryny öz içine alýan obykt alarys. Geliň onuň ýardamynda, meselem, reňki okaýalyň:

javascriptconsole.log(computedStyle.color); // 'red' çykaryp berer

Indi bolsa ini:

javascriptconsole.log(computedStyle.width); // '100px' çykaryp berer

Indi bolsa şrift ölçegini:

javascriptconsole.log(computedStyle.fontSize); // '20px' çykaryp berer

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

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