Přepínání tříd v JS

Chceme-li na stránce provádět změny vzhledu, zobrazovat a skrývat text nebo obecně provádět nějaké visuální změny, existují dva základní postupy:

1. Měnit CSS vlastnosti přímo JavaScriptem přes vlastnost style:

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

   Pomlčky (spojovníky) v názvech CSS vlastností se v JavaScriptu zapisují tak, že se spojovník vypustí a písmeno po něm se zvětší (u CSS prefixů je v IE drobná odlišnost).

   Případně se dají všechna pravidla nastavit najednou přes style.cssText:

   element.style.cssText = "color: red; margin-top: 1em";

2. Změnit jen třídu (className) a vzhled řešit v CSS.

Měnit jen CSS třídu bývá většinou lepší postup. Nezanáší se tolik JS kód a CSS je možné psát v běžném a komfortnějším prostředí, než je cssText řetězec.

Pochopitelně to neplatí vždy. Třeba u dynamicky nastavovaných rozměrů nemá smysl si vytvářet stovky tříd typu:

.sirka108 {width: 108px}

Ale asi bude výhodnější měnit style.width.

Nastavit třídu

Nastavení požadované třídy se provádí změnou element.className.

Následující kód nastaví (přepíše) elementu s ID idecko třídu na vlastni-trida:

var element = document.getElementById("idecko");
element.className = "vlastni-trida";

Přidat třídu

V případě, že element už nějakou class má, potřebujeme tu novou jen přidat, ale zachovat původní:

element.className += " dalsi-trida";

Uvedený kód přidá k původní hodnotě dalsi-trida. Důležité je si uvědomit, že výsledným obsahem className musí být stejný obsah jako při klasickém nastavování tříd v HTML:

<div class="prvni-trida dalsi-trida">

Nesmí se tedy zapomenout na mezeru mezi třídami. Mezery okolo jsou nadbytečné, ale ničemu nevadí.

Odebrat třídu

Tady už se musí pro podporu napříč prohlížeči začít trošku víc programovat a pomocí replace požadovanou třídu odstranit.

function odebratTridu(element, trida) {
  element.className = element.className.replace(trida, "");
}

Přidat/odebrat třídu

Pro přepínání jedné třídy můžeme použít něco jako:

function prepnout(element, trida) {
  if (element.className.match(trida)) {
    element.className = element.className.replace(trida, "");
  }
  else {
    element.className += " " + trida;
  }
}

V případě, že element už třídu má, bude mu odebrána; pokud ji naopak ještě nemá, bude přidána.

Přepínání dvou tříd

A nakonec prohazování dvou názvů třídy bude vypadat následovně:

function prohoditTridy(element, trida1, trida2) {
  element.className = element.className == trida2 ? trida1 : trida2;
}

Jakému elementu třídu měnit?

Důležitá otázka je, kterému elementu třídu měnit/prohazovat/přepínat.

1. Pokud je tlačítko k přepínání uvnitř elementu, dá se na něj elegantně dostat přes parentNode (ukázka).
2. V ostatních případech je většinou nejlepší najít element přes document.getElementById("idecko") (ukázka).

Seznam tříd classList

Od IE 10 funguje v prohlížečích vlastnost classList:

• element.classList.contains("nazevTridy") — zjistí, zda element má nastavenou třídu,
• element.classList.add("nazevTridy") — přidá třídu,
• element.classList.remove("nazevTridy") — odebere třídu,
• element.classList.toggle("nazevTridy") — přepne třídu (ukázka).

Testovat podporu classListu lze třeba přes:

if (document.documentElement.classList) {
  // classList funguje
}

Použití classListu by v podporovaných prohlížečích asi mělo být rychlejší. Existuje hotové řešení Apollo.js, které právě v podporovaných prohlížečích použije classList a jinde klasické řešení.

Pokročilejší classList

Mimo IE jde v novějších prohlížečích používat ještě užitečnější rozhraní classList:

1. Druhý parametr v classList.toggle:

   element.classList.toggle('prepnout-tridu', promenna > 10);

   Přidá/odebere třídu podle vyhodnocení podmínky v druhém argumentu.

2. Více tříd v classList.add/classList.remove:

   element.classList.add('prvni-trida', druha-trida);

3. Nahrazení třídy přes element.classList.replace:

   element.classList.replace('puvodni-trida', nova-trida);