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

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

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

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

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

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

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

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

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

Indi bolsa ini:

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

Indi bolsa şrift ölçegini:

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

Element üçin aşakdaky stiller berlen:

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

Düwmä basylanda elementüň ini we beýikligini çykaryň.

Element üçin aşakdaky stiller berlen:

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

Düwmä basylanda elementüň ini we beýikligini iki esse köpeltiň.