Strona główna >JavaScript >Leksykon JS – metody i obiekty >HTMLElement.style

HTMLElement.style

element.style.property = value element.style.setProperty('--variable', value)

Dostęp do atrybutu style elementu. Właściwości CSS pisze się w camelCase (backgroundColor), zmienne CSS przez setProperty(). Odczytuje tylko style inline – rzeczywisty wygląd zwraca getComputedStyle().

Przykład pracuje z kodem HTML nad kodem JavaScript.

Wartość zwracana

Obiekt CSSStyleDeclaration.

Przykłady

<style>#panel { color: navy; }</style><div id="panel" style="padding: 10px">Panel</div>

const panel = document.getElementById('panel');
panel.style.backgroundColor = '#ffeeaa';
panel.style.width = 300 + 'px';
panel.style.setProperty('--column-width', '12rem');
console.log(panel.getAttribute('style'));
console.log(JSON.stringify(panel.style.color), getComputedStyle(panel).color);
panel.style.width = '';
panel.style.width = 300;
console.log(JSON.stringify(panel.style.width));

Wynik:

padding: 10px; background-color: rgb(255, 238, 170); width: 300px; --column-width: 12rem;
"" rgb(0, 0, 128)
""

Na co uważać

  • Liczba bez jednostki nie zostanie zapisana (style.width = 300 jest ignorowane) – dopisz 'px'.
  • Zwykle lepiej dodać klasę przez classList – style zostają w CSS i łatwo je zmienić. Właściwość style przydaje się do wartości obliczanych w trakcie działania strony (pozycje, rozmiary, zmienne CSS).
  • Pusty tekst usuwa styl.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 1, Firefox 1, Safari 3; brak w Node.js (API przeglądarki). Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
getComputedStyle()
Element.classList
requestAnimationFrame()