Uživatelské atributy v JavaScriptu

V HTML je povoleno přidávat vlastní, uživatelské atributy tagům. Takové atributy musí začínat s data-, a poté může následovat jakýkoli název atributu, který vám vyhovuje.

Uživatelské atributy mohou být použity obrovským množstvím různých způsobů. Mnoho z těchto způsobů prozkoumáme dále v učebnici, a ještě více jich budete moci v budoucnu vymyslet sami.

Přistupování k takovým atributům není standardní. Nelze jednoduše přistoupit k vlastnosti elementu se stejným názvem, jak jsme to dělali dříve, ale je třeba použít speciální vlastnost dataset, za kterým se tečkou píše název atributu bez data-. Například, pokud se náš atribut jmenuje data-test, tak pro přístup k němu budeme psát elem.dataset.test, kde elem je proměnná s naším elementem.

Podívejme se na příklad. Předpokládejme, že máme dán tento element:

<div id="elem" data-num="1000"></div>

Vypišme na obrazovku hodnotu jeho atributu data-num:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // vypíše 1000

A nyní přiřaďme tomuto atributu jinou hodnotu:

let elem = document.querySelector('#elem');
elem.dataset.num = 123;

Dán je následující kód:

<div id="elem" data-text="str">text</div>

Zařiďte, aby po kliknutí na div se na konec jeho textu přidalo obsah jeho atributu data-text.

Jsou dány divy, obsahující v atributu data-num své pořadové číslo:

<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>

Zařiďte, aby po kliknutí na kterýkoli z divů se mu na konec zapsalo jeho pořadové číslo.

Dáno je tlačítko. Zařiďte, aby toto tlačítko počítalo počet kliknutí na něj, zapisujíc je do nějakého uživatelského atributu. Nechť po kliknutí na jiné tlačítko se na obrazovku vypíše, kolik kliknutí bylo provedeno na první tlačítko.

Dán je input:

<input id="elem" data-length="5">

V tomto inputu v atributu data-length je obsažen počet znaků, které je třeba zadat do inputu. Zařiďte, aby po ztrátě fokusu, pokud se počet zadaných znaků nerovná zadanému, se zobrazila zpráva o tom.

Dán je input:

<input id="elem" data-min="5" data-max="10">

V tomto inputu atributy data-min a data-max obsahují rozsah. Zařiďte, aby po ztrátě fokusu, pokud počet zadaných znaků nespadá do tohoto rozsahu, se zobrazila zpráva o tom.