Změna stylů JavaScriptem

Ke stylu jednotlivých elementů je v JS přístup prostřednictvím vlastnosti style.

var element = document.getElementById("idecko");
element.style.color = "red";

Pro CSS vlastnosti s pomlčkou (spojovníkem) se potom spojovník vypustí a následující písmeno po něm zvětší (příklad pro vlastnost background-color):

element.style.backgroundColor = "red";

CSS prefixy

Rovněž prefixované vlastnosti jdou JavaScriptem měnit.

Logika je stejná – vypustit spojovník a následující písmeno zvětšit. Vlastnost -webkit-animation tak bude WebkitAanimation:

element.style.WebkitAnimation = "animace";

Odlišná je situace v IE, kde je první písmeno malé:

element.style.msTransform = "…";

CSS text

V případě, že je potřeba u jednoho elementu měnit více vlastností, je možné nastavovat vlastnost po vlastnosti:

element.style.color = "red";
element.style.padding = "1em";

Nebo použít cssText, kam se píše normální CSS:

element.style.cssText = "color: red; padding: 1em";

veinjs

Elegantnější nastavování vlastností nabízí například knihovna veinjs.

vein.inject('h1.myHeader', {'color': 'red', 'font-size': '3em'});

Podobný zápis umí i funkce css() v jQuery.

Změna CSS třídy

Pokud se nastavovaný vzhled nějak nezjišťuje a nepočítá skriptem, nabízí se v JS pouze měnit CSS třídy a příslušné styly mít v CSS souboru.

Například:

element.className += " nazevTridy";

A v CSS:

.nazevTridy {
  /* styly */;
}

Připojení CSS

Má-li se skriptem vypočítaný styl aplikovat pro velké množství elementů, není potřeba procházet všechny elementy a nastavovat jim vlastnosti/třídy, ale jde skriptem vytvořit přímo CSS a připojit ho do stránky:

var css = "p {color: red}";
var styl = document.createElement("style");
styl.innerHTML = css;
document.getElementsByTagName("head")[0].appendChild(styl);

Ukázka

Pro IE 8 a starší i nové prohlížeče zároveň je funkční následující postup:

var css = "p {color: red}";
var div = document.createElement('div');
div.innerHTML = '<span>&nbsp;</span><style>' + css + '</style>';
document.getElementsByTagName('head')[0].appendChild(div.childNodes[1]);

Ukázka

Tento postup jde použít třeba pro vyhledávání pomocí CSS selektorů.

Přečtení hodnoty

Vlastnost style nejde používat pro zjištění stylu:

<style>
  p {color: red}
</style>

Odstavec bude červený, ale v jeho style.color nebude nic:

console.log(odstavec.style.color); // nic

Zjišťovat skutečný styl jde přes getComputedStyle: