Funkcja getComputedStyle

Funkcja getComputedStyle pozwala uzyskać wartość dowolnej właściwości CSS elementu, nawet z pliku CSS.

Składnia

javascriptlet obiekt = getComputedStyle(element);

Szczegóły

Jak to działa (uwaga: nie tak jak oczekujemy): parametrem funkcja przyjmuje element, a zwraca obiekt, który zawiera w sobie wszystkie właściwości CSS przekazanego elementu. Przyjmijmy ten obiekt do zmiennej style. Nazwa jest dowolna, to po prostu zmienna - jak wymyślimy, tak będziemy się odnosić:

javascriptlet elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // w style leżą właściwości CSS

Wypiszmy na przykład szerokość. Robi się to tak - style.width:

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

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

Aby wypisać, na przykład, lewy padding - robimy tak - style.paddingLeft:

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

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

W następnym przykładzie wypiszemy wszystkie interesujące nas właściwości CSS dla naszego elementu:

html<div id="elem">text</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); // wypisze '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // wypisze '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // wypisze 'solid'

Niedokładność getComputedStyle

Czasami funkcja getComputedStyle działa nie do końca poprawnie z szerokością i wysokością. Jest to związane z tym, że padding i obramowanie rozszerzają blok. W następnym przykładzie blokowi nadana jest szerokość 200px, a także obramowanie i border. Rzeczywista szerokość bloku to 300px, ale getComputedStyle i tak wypisze 200px:

html<div id="elem">text</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); // wypisze '200px'
console.log('height: ' + style.height); // wypisze '200px'

Czyli: okazuje się, że getComputedStyle ignoruje rozszerzenie bloku i pokazuje jego wymiary tak, jakby tego rozszerzenia nie było. Ale to jeszcze nie wszystko: ma również znaczenie obecność lub brak paska przewijania - niektóre przeglądarki odejmują szerokość paska przewijania od szerokości obliczonej za pomocą getComputedStyle, a niektóre nie odejmują. Generalnie tutaj w ogóle wszystko nie jest cross-browserowe i lepiej getComputedStyle do określania szerokości i wysokości nie używać, a korzystać z metryk, które poznamy nieco poniżej.

Obliczone wartości

Jest jeszcze jeden niuans: jeśli szerokość jest podana w % - to po działaniu getComputedStyle zobaczymy ją w px. Czyli w zasadzie otrzymujemy nie zadaną szerokość, a obliczoną. Spójrzcie na następującym przykładzie:

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

css#elem {
  width: 30%; /* szerokość podana w % */
  height: 200px;
  padding: 30px;
  border: 20px solid #BCBCBC;
  overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // wypisze szerokość w px

Zobacz także