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

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

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

html<div id="elem">
  text
</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;
}