Niestandardowe atrybuty w JavaScript

W HTML dozwolone jest dodawanie własnych, niestandardowych atrybutów do tagów. Takie atrybuty muszą zaczynać się od data-, a następnie może iść dowolna nazwa atrybutu, która jest dla Ciebie wygodna.

Niestandardowe atrybuty mogą być wykorzystane na ogromną liczbę różnych sposobów. Wiele z tych sposobów poznamy dalej w samouczku, a jeszcze więcej będziesz mógł w przyszłości wymyślić samodzielnie.

Dostęp do takich atrybutów nie jest zorganizowany w standardowy sposób. Nie można po prostu odwołać się do właściwości elementu o tej samej nazwie, jak robiliśmy to wcześniej, lecz należy użyć specjalnej właściwości dataset, po której przez kropkę pisze się nazwę atrybutu bez data-. Na przykład, jeśli nasz atrybut nazywa się data-test, to aby się do niego odwołać, będziemy pisać elem.dataset.test, gdzie elem - zmienna z naszym elementem.

Spójrzmy na przykład. Załóżmy, że mamy danym następujący element:

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

Wypiszmy na ekran wartość jego atrybutu data-num:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // wypisze 1000

A teraz przypiszmy temu atrybutowi inną wartość:

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

Dany jest następujący kod:

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

Spraw, aby po kliknięciu na div na koniec jego tekstu dodała się zawartość jego atrybutu data-text.

Dane są divy, zawierające w atrybucie data-num swój numer porządkowy:

<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>

Spraw, aby po kliknięciu na którykolwiek z divów, na jego koniec został zapisany jego numer porządkowy.

Dany jest przycisk. Spraw, aby ten przycisk liczył ilość kliknięć na niego, zapisując je w jakimś niestandardowym atrybucie. Niech po kliknięciu na inny przycisk na ekran zostanie wypisane, ile kliknięć zostało wykonanych na pierwszym przycisku.

Dane jest pole input:

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

W tym polu input w atrybucie data-length zawarta jest liczba znaków, które należy wprowadzić do pola. Spraw, aby po utracie fokusu, jeśli liczba wprowadzonych znaków nie zgadza się z zadaną, wyświetlał się komunikat o tym.

Dane jest pole input:

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

W tym polu input atrybuty data-min i data-max zawierają zakres. Spraw tak, aby po utracie fokusu, jeśli liczba wprowadzonych znaków nie mieści się w tym zakresie, wyświetlał się komunikat o tym.