Styly a třídy

Než se ponoříme do způsobu, jakým JavaScript pracuje se styly a třídami, uvedeme důležité pravidlo. Doufáme, že je dostatečně známé, ale přesto je musíme uvést.

Existují v zásadě dva způsoby, jak nastavit styl elementu:

1. VytvoÅ™it třídu v CSS a pÅ™iÅ™adit ji elementu: <div class="...">
2. Zapsat vlastnosti přímo do atributu style: <div style="...">.

JavaScript umí modifikovat jak třídy, tak vlastnosti style.

Vždy bychom mÄ›li dávat pÅ™ednost CSS třídám pÅ™ed atributem style. Ten bychom mÄ›li používat jen v případech, kdy to třídy „nezvládnou“.

Například style je pÅ™ijatelný, pokud dynamicky spočítáme souÅ™adnice elementu a chceme je nastavit z JavaScriptu, například takto:

let shora = /* složité výpočty */;
let zleva = /* složité výpočty */;

elem.style.left = zleva; // např. '123px', vypočteno za běhu
elem.style.top = shora; // napÅ™. '456px'

V jiných případech, například pro obarvení textu červeně nebo přidání ikony na pozadí, popište vše v CSS a pak přidejte třídu (JavaScript to umí). Je to flexibilnější a podpora je snadnější.

className a classList

Změna třídy je jednou z nejčastěji používaných akcí ve skriptech.

V dřívÄ›jších dobách platilo v JavaScriptu omezení: rezervované slovo, napÅ™. "class", nemůže být vlastností objektu. Toto omezení již neexistuje, ale v oné dobÄ› nebylo možné mít vlastnost s názvem "class", napÅ™. elem.class.

Pro třídy tedy byla zavedena podobná vlastnost "className": elem.className odpovídá atributu "class".

Příklad:

<body class="hlavní strana">
  <script>
    alert(document.body.className); // hlavní strana
  </script>
</body>

Jestliže do elem.className nÄ›co pÅ™iÅ™adíme, nahradíme tím celý Å™etÄ›zec tříd. NÄ›kdy je to právÄ› to, co potÅ™ebujeme, ale často chceme pÅ™idat nebo odebrat jedinou třídu.

K tomu slouží jiná vlastnost: elem.classList.

elem.classList je speciální objekt s metodami add/remove/toggle pro pÅ™idání, odstranÄ›ní a pÅ™epnutí jediné třídy.

Příklad:

<body class="hlavní strana">
  <script>
    // přidáme třídu
    document.body.classList.add('článek');

    alert(document.body.className); // hlavní strana článek
  </script>
</body>

Můžeme tedy pracovat jak s celým Å™etÄ›zcem tříd pomocí className, tak s jednotlivými třídami pomocí classList. Záleží na naÅ¡ich potÅ™ebách, co si vybereme.

Metody objektu classList:

• elem.classList.add/remove("třída") – pÅ™idá/odstraní třídu.
• elem.classList.toggle("třída") – pokud třída není v seznamu, pÅ™idá ji, jinak ji odstraní.
• elem.classList.contains("třída") – ověří, zda zadaná třída je v seznamu, vrátí true/false.

KromÄ› toho classList je iterovatelný, takže si můžeme vypsat vÅ¡echny třídy cyklem for..of, například:

<body class="hlavní strana">
  <script>
    for (let název of document.body.classList) {
      alert(název); // hlavní, pak strana
    }
  </script>
</body>

Styl elementu

Vlastnost elem.style je objekt, který odpovídá tomu, co je zapsáno do atributu "style". Nastavení elem.style.width="100px" funguje stejnÄ›, jako kdybychom mÄ›li v atributu style Å™etÄ›zec width:100px.

U víceslovných vlastností se používá velbloudíNotace:

background-color  => elem.style.backgroundColor
z-index           => elem.style.zIndex
border-left-width => elem.style.borderLeftWidth

Příklad:

document.body.style.backgroundColor = prompt('barva pozadí?', 'green');

button.style.MozBorderRadius = '5px';
button.style.WebkitBorderRadius = '5px';

Resetování vlastnosti style

NÄ›kdy chceme do vlastnosti style nÄ›co pÅ™iÅ™adit a pozdÄ›ji to odstranit.

Například můžeme nastavit elem.style.display = "none", abychom skryli element.

PozdÄ›ji můžeme chtít style.display odstranit, jako by vůbec nebyla nastavena. Místo mazání delete elem.style.display bychom do ní mÄ›li pÅ™iÅ™adit prázdný Å™etÄ›zec: elem.style.display = "".

// spustíme-li tento kód, <body> blikne
document.body.style.display = "none"; // schovat

setTimeout(() => document.body.style.display = "", 1000); // zpět do normálu

Jestliže nastavíme style.display na prázdný Å™etÄ›zec, prohlížeč aplikuje CSS třídy a jejich zabudované styly běžným způsobem, jako by vlastnost style.display vůbec neexistovala.

K tomu existuje i speciální metoda, elem.style.removeProperty('vlastnost stylu'). Můžeme tedy odstranit vlastnost následovnÄ›:

document.body.style.background = 'red'; // nastavíme červené pozadí

setTimeout(() => document.body.style.removeProperty('background'), 1000); // za 1 sekundu pozadí odstraníme

<div id="div">Tlačítko</div>

<script>
  // zde můžeme nastavit speciální přepínače stylu, např. "important"
  div.style.cssText=`color: red !important;
    background-color: yellow;
    width: 100px;
    text-align: center;
  `;

  alert(div.style.cssText);
</script>

Nezapomínejte na jednotky

Nezapomínejte přidávat k hodnotám CSS jednotky.

Například elem.style.top bychom nemÄ›li nastavovat na 10, ale na 10px. Jinak to nebude fungovat:

<body>
  <script>
    // nefunguje to!
    document.body.style.margin = 20;
    alert(document.body.style.margin); // '' (prázdný řetězec, přiřazení je ignorováno)

    // nyní přidáme CSS jednotku (px) - a už to funguje
    document.body.style.margin = '20px';
    alert(document.body.style.margin); // 20px

    alert(document.body.style.marginTop); // 20px
    alert(document.body.style.marginLeft); // 20px
  </script>
</body>

Prosíme vÅ¡imnÄ›te si, že na posledních řádcích prohlížeč „rozbalí“ vlastnost style.margin a odvodí z ní style.marginLeft a style.marginTop.

Vypočítané vlastnosti: getComputedStyle

Změnit styl je tedy jednoduché. Ale jak jej načíst?

Chceme například znát velikost, okraje nebo barvu elementu. Jak to udělat?

Vlastnost style pracuje jen s hodnotou atributu "style" bez jakékoli CSS kaskády.

Pomocí elem.style tedy nejsme schopni načíst nic, co pochází z CSS tříd.

Například zde style nevidí vnÄ›jší okraj (margin):

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  Červený text
  <script>
    alert(document.body.style.color); // prázdný
    alert(document.body.style.marginTop); // prázdný
  </script>
</body>

…Ale co když chceme tÅ™eba zvÄ›tÅ¡it vnÄ›jší okraj o 20px? ChtÄ›li bychom znát jeho aktuální hodnotu.

K tomu slouží jiná metoda: getComputedStyle.

Její syntaxe je:

getComputedStyle(element, [pseudo])

element

Element, jehož hodnota má být načtena.

pseudo

Pseudoelement, pokud je vyžadován, například ::before. Prázdný Å™etÄ›zec nebo žádný argument znamená samotný element.

Výsledkem je objekt obsahující styly, podobný elem.style, ale tentokrát s ohledem na vÅ¡echny CSS třídy.

Například:

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  <script>
    let vypočítanýStyl = getComputedStyle(document.body);

    // nyní z něj můžeme načíst vnější okraj a barvu

    alert( vypočítanýStyl.marginTop ); // 5px
    alert( vypočítanýStyl.color ); // rgb(255, 0, 0)
  </script>

</body>

Shrnutí

Ke správě tříd slouží dvě vlastnosti DOMu:

• className – Å™etÄ›zcová hodnota, hodí se pro správu celé sady tříd.
• classList – objekt s metodami add/remove/toggle/contains, hodí se pro jednotlivé třídy.

Ke změně stylu:

• Vlastnost style je objekt, který obsahuje styly zapsané velbloudíNotací. ÄŒtení a zápis do nÄ›j má stejný význam jako modifikace jednotlivých vlastností v atributu "style". Chcete-li vidÄ›t, jak se aplikuje important a jiné vzácnÄ› používané vlastnosti, MDN obsahuje seznam metod.

• Vlastnost style.cssText odpovídá celému atributu "style", úplnému Å™etÄ›zci stylů.

K načtení vyhodnocených stylů (s ohledem na všechny třídy po aplikaci všech CSS a výpočtu finálních hodnot):

• Metoda getComputedStyle(elem, [pseudo]) vrací objekt podobný stylu, který je obsahuje. Je pouze pro čtení.