Właściwość style w JavaScript

Właściwość style w JavaScript służy do zmiany stylu CSS konkretnego elementu HTML. Używa się jej po pobraniu elementu z DOM, np. za pomocą document.getElementById().

Składnia

document.getElementById("id").style.nazwaWlasciwosci = "wartość";

Przykład:

document.getElementById("blok").style.color = "red";
document.getElementById("blok").style.backgroundColor = "yellow";
document.getElementById("blok").style.fontSize = "20px";

Nazwy właściwości CSS w JavaScript

W CSS wiele właściwości zapisuje się z myślnikiem, np.:

background-color
font-size

W JavaScript używa się zapisu camelCase:

backgroundColor
fontSize

Dlatego poprawny zapis zmiany koloru tła to:

element.style.backgroundColor = "blue";

a nie:

element.style.background-color = "blue";

Ważne rozróżnienie

• innerHTML zmienia zawartość elementu HTML,
• style zmienia jego wygląd,
• bezpośredni zapis element.color zwykle nie zmienia stylu CSS.

Na egzaminie poprawna forma zmiany właściwości CSS przez JavaScript to:

document.getElementById(id).style.wlasciwosc = wartosc;