Metoda getComputedStyle()

  • Poprzednia strona
  • Następna strona
  • Wróć do poprzedniego poziomu Obiekt Window

Definicja i użycie

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

getComputedStyle() Metoda zwraca obiekt CSSStyleDeclaration.

Obliczone style

Obliczone style to style używane 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 pseudoelementu):

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 Opcjonalne. Pseudoelement, dla którego ma być pobrany styl.

Zwraca 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 obiektu HTMLElement: ten ostatni pozwala na dostęp do wewnętrznych stylów elementu, można używać dowolnych jednostek, a nie można powiedzieć, jakie informacje o stylach aplikowanych do 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
  • Poprzednia strona
  • Następna strona
  • Wróć do poprzedniego poziomu Obiekt Window