HTMLElement.
Obiekt stylów wpisanych bezpośrednio w element (inline), do odczytu i zmiany pojedynczych właściwości CSS.
- Zwraca
- Obiekt
CSSStyleDeclarationze stylami inline elementu.
Przykład
#const bar = document.querySelector('#bar')
bar.style.width = '65%'
bar.style.backgroundColor = 'orange'
console.log(bar.style.width)
console.log(bar.style.backgroundColor)
console.log(bar.style.height)Definicja i zastosowanie
#Właściwość style daje dostęp do stylów zapisanych w atrybucie style elementu. Każda właściwość CSS ma tu odpowiednik w zapisie camelCase: background-color to style.backgroundColor, a font-size to style.fontSize. Wartości ustawiasz jako napisy, zawsze z jednostką, np. "200px".
style pokazuje tylko style inline. Nie zobaczysz w nim reguł z arkuszy CSS, więc odczyt style.color dla elementu stylowanego klasą zwróci pusty napis. Do odczytu faktycznego, obliczonego wyglądu służy funkcja getComputedStyle(element).
Zmienne CSS (np. --accent) ustawisz metodą style.setProperty("--accent", "#7c3aed"), a styl usuniesz, przypisując pusty napis albo wywołując removeProperty(). Przy większych zmianach wyglądu lepiej przełączać klasy przez classList, a style zostawić dla wartości obliczanych w locie, np. pozycji albo szerokości paska postępu.
Składnia
#element.style.propertyName = value
element.style.setProperty(name, value)
element.style.removeProperty(name)
getComputedStyle(element).propertyNameWięcej przykładów
#const title = document.querySelector('#title')
console.log(title.style.color === '')
console.log(getComputedStyle(title).color)
console.log(getComputedStyle(title).fontSize)const box = document.querySelector('#box')
box.style.setProperty('--accent', '#0ea5e9')
console.log(box.style.getPropertyValue('--accent'))
box.style.width = 120
console.log(box.style.width === '')
box.style.width = '120px'
console.log(box.style.width)Przypisanie samej liczby 120 zostaje zignorowane, bo w CSS szerokość wymaga jednostki. Dopiero napis "120px" zmienia styl.
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
#- Zawsze podawaj jednostkę:
style.width = "120px". Sama liczba zostanie zignorowana. - Do odczytu stylów z arkuszy CSS używaj
getComputedStyle(element), bostylewidzi tylko wartości inline. - Większe zmiany wyglądu opisz w CSS jako klasę i przełączaj ją przez
classList.
Powiązane hasła
#- Element.classListObiekt do dodawania, usuwania, przełączania i sprawdzania klas CSS elementu.
- getComputedStyle()Zwraca obliczone style elementu, czyli wartości CSS, które przeglądarka faktycznie zastosowała po uwzględnieniu wszystkich reguł.
- Element.setAttribute()Ustawia wartość atrybutu HTML elementu albo dodaje nowy atrybut.
- document.querySelector()Zwraca pierwszy element pasujący do selektora CSS albo null, gdy nic nie pasuje.
- Template literalsSzablony tekstowe w odwróconych apostrofach: wstawiają wartości przez ${} i mogą zajmować wiele linii.
Widzisz błąd albo brakuje przykładu? Napisz do nas.