getComputedStyle()
Zwraca obliczone style elementu, czyli wartości CSS, które przeglądarka faktycznie zastosowała po uwzględnieniu wszystkich reguł.
- Zwraca
- Żywy obiekt
CSSStyleDeclaration, tylko do odczytu, z obliczonymi wartościami wszystkich właściwości CSS.
Przykład
#const badge = document.querySelector('#badge')
const styles = getComputedStyle(badge)
console.log(badge.style.color === '')
console.log(styles.color)
console.log(styles.fontSize)
console.log(styles.fontWeight)
console.log(styles.borderTopColor)
console.log(styles.display)element.style jest pusty, bo kolor pochodzi z klasy. Obliczone style pokazują kolor w formacie rgb(), rozmiar 1.25rem w pikselach, bold jako 700, a currentColor zamieniony na konkretny kolor. inline to domyślny sposób wyświetlania elementu <span>.
Definicja i zastosowanie
#Funkcja getComputedStyle() (pełna nazwa to window.getComputedStyle()) zwraca obiekt z ostatecznymi wartościami wszystkich właściwości CSS elementu. Uwzględnia arkusze stylów, style inline, dziedziczenie i wartości domyślne przeglądarki. To najprostszy sposób, żeby w JavaScripcie sprawdzić np. kolor nadany klasą, bo element.style widzi tylko style wpisane w atrybut style.
Wartości są zwracane w postaci obliczonej, zwykle ujednoliconej: kolory jako rgb(…), długości w pikselach (1.25rem stanie się np. "20px"), a słowa kluczowe takie jak bold jako liczby ("700"). Zawsze są to napisy, więc przed obliczeniami zamień je na liczby, np. przez parseFloat().
Zwrócony obiekt jest „żywy”: po zmianie klasy lub stylu kolejny odczyt pokaże nową wartość. Jest tylko do odczytu, więc style zmieniaj przez element.style albo classList. Drugi argument pozwala odczytać style pseudoelementu, np. getComputedStyle(el, "::before").content, a wartości zmiennych CSS odczytasz metodą getPropertyValue("--nazwa").
Składnia
#getComputedStyle(element)
getComputedStyle(element, pseudoElement)
getComputedStyle(element).propertyName
getComputedStyle(element).getPropertyValue(name)Parametry
#element
Element
Element, którego obliczone style chcesz odczytać.pseudoElement
opcjonalny, napis
Pseudoelement, np."::before"albo"::after".
Więcej przykładów
#const progress = document.querySelector('#progress')
const { width, paddingLeft } = getComputedStyle(progress)
console.log(width, paddingLeft)
console.log(parseFloat(width) - 2 * parseFloat(paddingLeft))
console.log(width + 10)Obliczone wartości to napisy z jednostką. parseFloat() wyciąga z nich liczby, a zwykłe dodawanie skleja napisy, co widać w ostatnim wierszu.
const lesson = document.querySelector('#lesson')
const before = getComputedStyle(lesson, '::before')
console.log(before.content)
console.log(before.color)
console.log(getComputedStyle(document.documentElement).getPropertyValue('--accent'))const panel = document.querySelector('#panel')
const styles = getComputedStyle(panel)
console.log(styles.display)
panel.classList.add('hidden')
console.log(styles.display)Nie trzeba ponownie wywoływać getComputedStyle(). Ten sam obiekt po zmianie klasy od razu pokazuje nową wartość.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Obliczone wartości to napisy z jednostkami, np.
"16px". Przed obliczeniami użyjparseFloat(). - Kolory dostaniesz zwykle w formacie
rgb(…), nawet jeśli w CSS zapisano je jako#hexalbo nazwę. Porównuj je w tym samym formacie. - Odczyt obliczonych stylów może zmusić przeglądarkę do przeliczenia stylów i układu strony. Nie przeplataj w pętli odczytów ze zmianami stylów.
Powiązane hasła
#- HTMLElement.styleObiekt stylów wpisanych bezpośrednio w element (inline), do odczytu i zmiany pojedynczych właściwości CSS.
- Element.classListObiekt do dodawania, usuwania, przełączania i sprawdzania klas CSS elementu.
- Element.getBoundingClientRect()Zwraca rozmiar elementu i jego położenie względem widocznego obszaru okna w postaci obiektu DOMRect.
- Number.parseFloat()Zamienia początek napisu na liczbę zmiennoprzecinkową.
- matchMedia()Sprawdza w JavaScripcie, czy strona spełnia zapytanie medialne CSS, np. (max-width: 600px), i pozwala reagować na jego zmiany.
Widzisz błąd albo brakuje przykładu? Napisz do nas.