getComputedStyle Funksiyası

getComputedStyle funksiyası elementin istənilən CSS xassəsinin dəyərini, hətta CSS faylından almağa imkan verir.

Sintaksis

javascriptlet obyekt = getComputedStyle(element);

Detallar

Bu necə işləyir (diqqət: gözlədiyimiz kimi deyil): funksiya parametr kimi elementi qəbul edir, və ötürülən elementin bütün CSS xassələrini özündə saxlayan bir obyekt qaytarır. Gəlin bu obyekti style dəyişəninə qoyaq. Ad ixtiyaridir, bu sadəcə bir dəyişəndir - necə adlandırsaq, elə də istifadə edəcəyik:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style-da CSS xassələri yerləşir

Gəlin, məsələn, eni çıxadaq. Bu belə edilir - style.width:

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

let style = getComputedStyle(elem);
console.log(style.width);

Çıxarmaq üçün, məsələn, sol padding - belə edirik - style.paddingLeft:

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

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

Aşağıdakı nümunədə biz elementimiz üçün bizi maraqlandıran bütün CSS xassələrini çıxardacağıq:

html<div id="elem">mətn</div>

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // '30px' çıxardacaq
console.log('borderTopWidth: ' + style.borderTopWidth); // '20px' çıxardacaq
console.log('borderTopStyle: ' + style.borderTopStyle); // 'solid' çıxardacaq

getComputedStyle-in Dəqiq Olmaması

Bəzən getComputedStyle funksiyası en və hündürlüklə tam düzgün işləmir. Bu onunla əlaqədardır ki, padding və sərhəd bloku genişləndirir. Aşağıdakı nümunədə bloka 200px en, həmçinin sərhəd və border təyin edilib. Blokun həqiqi eni 300px, amma getComputedStyle yenə də 200px çıxardacaq:

html<div id="elem">mətn</div>

css#elem {
  width: 200px;
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // '200px' çıxardacaq
console.log('height: ' + style.height); // '200px' çıxardacaq

Yəni: belə çıxır ki, getComputedStyle blokun genişlənməsini məhəl qoymur və onun ölçülərini elə göstərir ki, sanki bu genişlənmə olmayıb. Amma bu hələ bitməyib: həmçinin sürüşdürmə cərgəsinin olması və ya olmamasının da əhəmiyyəti var - bəzi brauzerlər sürüşdürmə cərgəsinin enini getComputedStyle vasitəsilə hesablanmış endən çıxır, bəziləri isə çıxmır. Ümumiyyətlə burada hər şey tamamilə brauzerlar arası uyğun deyil və getComputedStyle-dan en və hündürlüyü müəyyən etmək üçün istifadə etmək daha yaxşıdır, əvəzində aşağıda öyrənəcəyimiz metrikalardan istifadə edin.

Hesablanmış Dəyərlər

Bir daha bir nüans var: əgər en % ilə təyin edilibsə - onda getComputedStyle işlədikdən sonra biz onu px ilə görəcəyik. Yəni mahiyyətcə biz təyin edilmiş eni deyil, hesablanmış olanı alırıq. Aşağıdakı nümunəyə baxın:

html<div id="elem">mətn</div>

css#elem {
  width: 30%; /* en % ilə verilib */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // eni px ilə çıxardacaq

Həmçinin Baxın