Metoda getComputedStyle()

Definicja i zastosowanie

getComputedStyle() Metoda pobiera obliczone atrybuty CSS i wartości HTML elementu.

getComputedStyle() Metoda zwraca obiekt CSSStyleDeclaration.

Obliczone style

Obliczone style to style zastosowane na elemencie po zastosowaniu wszystkich źródeł stylów.

Źródła stylów: zewnętrzne i wewnętrzne arkusze stylów, dziedziczone style i domyślne style przeglądarki.

Zobacz również:

Obiekt CSSStyleDeclaration

Przykład

Przykład 1

Pobierz obliczony kolor tła elementu:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

Spróbuj sam

Przykład 2

Pobierz wszystkie obliczone style z elementu:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
  cssObjProp = cssObj.item(x)
  text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}

Spróbuj sam

Przykład 3

Pobierz obliczony rozmiar czcionki pierwszej litery elementu (używając pseudo-elementu):

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");

Spróbuj sam

Gramatyka

window.getComputedStyle(element, pseudoElement)

Parametry

Parametry Opis
element Wymagane. Element, dla którego ma być pobrany styl.
pseudoElement Opcjonalnie. Pseudo-element, dla którego ma być pobrany styl.

Zwracana wartość

Typ Opis
Obiekt Obiekt CSSStyleDeclaration zawierający wszystkie atrybuty CSS i ich wartości elementu.

Różnica między metodą getComputedStyle() a atrybutem style

Porównaj metodę getComputedStyle() z atrybutem style HTMLElement: ten ostatni pozwala na dostęp do wewnętrznych stylów elementu, w dowolnym jednostce, i nie może podać żadnych informacji o stylach zastosowanych w tabeli stylów elementu.

Obsługa przeglądarek

Wszystkie przeglądarki wspierają getComputedStyle():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie 9-11 Wsparcie Wsparcie Wsparcie Wsparcie