Data v prvcích

Někdy musí prvek nést informaci, která není jeho textem. Na tlačítku stojí Moře, ale váš kód potřebuje barvu, která k němu patří. K tomu má HTML datové atributy: atributy, jejichž název začíná data- a pokračuje názvem, který si zvolíte sami:

<button id="more" data-barva="teal">Moře</button>
<button id="slunce" data-barva="orange">Slunce</button>

Prohlížeč s nimi nic nedělá, jsou tu pro váš skript. JavaScript je najde ve vlastnosti prvku dataset, pod názvem bez data-:

const tlacitkoMore = document.querySelector("#more");
console.log(tlacitkoMore.dataset.barva);

teal

Spolu s event.target vám to dá jednu obsluhu pro spoustu tlačítek, kde každé tlačítko samo říká, co se má stát:

const nadpis = document.querySelector("h1");
const tlacitkoMore = document.querySelector("#more");
const tlacitkoSlunce = document.querySelector("#slunce");

function obarvit(event) {
    nadpis.style.color = event.target.dataset.barva;
}

tlacitkoMore.addEventListener("click", obarvit);
tlacitkoSlunce.addEventListener("click", obarvit);

Kliknutí na Moře obarví nadpis modrozeleně a kliknutí na Slunce oranžově. Další barva je jen další tlačítko v HTML s vlastním data-barva.

Co dalšího o datových atributech vědět:

• Název z několika slov se spojovníky se v dataset píše v camelCase, stejně jako u style: data-cas-zacatku je dataset.casZacatku.
• Hodnota je vždy text. Abyste mohli počítat s data-cena="25", převeďte ji na číslo: Number(tlacitko.dataset.cena).
• Když prvek atribut nemá, dostanete undefined.
• JavaScript umí datové atributy i nastavit: polozka.dataset.id = 7; dá prvku data-id="7". To se hodí u prvků, které vytváří váš skript.