CSS ֆայլերից հատկությունների ընթերցում JavaScript-ում

CSS ֆայլում սահմանված հատկությունները կարելի է կարդալ՝ օգտագործելով հատուկ ֆունկցիա getComputedStyles:

Եկեք տեսնենք, թե ինչպես է դա արվում: Ենթադրենք, մենք ունենք հետևյալ տարրը.

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

Ենթադրենք, այս տարրի համար սահմանված են հետևյալ ոճերը.

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

Ստացենք տարրի հղումը փոփոխականի մեջ.

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

Այժմ ստացված տարրի հղումը փոխանցենք որպես պարամետր getComputedStyles ֆունկցիային.

let computedStyle = getComputedStyle(elem);

Արդյունքում մենք կստանանք օբյեկտ, որը պարունակում է մեր տարրի CSS հատկությունների արժեքները: Եկեք դրա օգնությամբ կարդանք, օրինակ, գույնը.

console.log(computedStyle.color); // կարտածի 'red'

Իսկ այժմ լայնությունը.

console.log(computedStyle.width); // կարտածի '100px'

Իսկ այժմ տառատեսակի չափը.

console.log(computedStyle.fontSize); // կարտածի '20px'

Տարրի համար սահմանված են հետևյալ ոճերը.

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

Կոճակի վրա կտտացնելիս արտածեք տարրի լայնությունն ու բարձրությունը:

Տարրի համար սահմանված են հետևյալ ոճերը.

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

Կոճակի վրա կտտացնելիս մեծացրեք տարրի լայնությունն ու բարձրությունը երկու անգամ: