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'});
  • veinjs – elegantní nastavování CSS v JavaScriptu

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:

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS vyhledávání a filtrování

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Tisk stránky

Vytisknutí stránky

Jak správně připravit webovou stránku pro pohodlné vytištění.

Chyby při programování

Jak zobrazit chybové hlášky

Při odstraňování problému v HTML/CSS/JS/PHP/SQL je nutný přístup k chybovým hláškám, jak se k nim dostat?

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře