Přidat/odebrat třídu

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, 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);

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ářů ↓

Změna vzhledu stránky

Změna designu bez znovunačtení stránky

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

Skrývání a odkrývání

Skrývání a odkrývání textu

Rozbalení a sbalení obsahu po kliknutí.

Fixní postranní panel

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

Aktivování/deaktivování okna

Zachycení aktivování a deaktivování okna v JS

V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.

Komentáře