Korisnički atributi u JavaScript

U HTML-u je dozvoljeno dodavanje sopstvenih, korisničkih atributa tagovima. Ovi atributi moraju počinjati sa data-, a zatim može ići bilo koje ime atributa koje vam odgovara.

Korisnički atributi mogu biti korišćeni na ogroman broj različitih načina. Mnoge od ovih načina ćemo naučiti kasnije u tutorijalu, a još više ćete moći da izmislite sami.

Pristupanje ovim atributima nije organizovano na standardan način. Ne možete jednostavno da pristupite svojstvu elementa sa istim imenom, kao što smo to ranije radili, već treba da koristite specijalno svojstvo dataset, nakon koga se tačkom piše ime atributa bez data-. Na primer, ako se naš atribut zove data-test, onda ćemo za pristup njemu pisati elem.dataset.test, gde je elem promenljiva sa našim elementom.

Hajde da pogledamo primer. Neka nam je dat ovakav element:

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

Ispisaćemo na ekran vrednost njegovog atributa data-num:

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

A sada ćemo dodeliti ovom atributu drugu vrednost:

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

Dat je sledeći kod:

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

Uredite tako da se klikom na div na kraj njegovog teksta doda sadržaj njegovog atributa data-text.

Data su polja (div), koja u atributu data-num sadrže svoj redni broj:

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

Uredite tako da se klikom na bilo koje od polja (div) na njegov kraj upiše njegov redni broj.

Data je dugme (button). Uredite tako da ovo dugme broji klikove na sebe, upisujući ih u neki korisnički atribut. Neka se klikom na drugo dugme na ekran ispiše koliko je klikova bilo na prvom dugmetu.

Dat je unos (input):

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

U ovom unosu (input) u atributu data-length sadržan je broj karaktera koji treba da se unese. Uredite tako da se pri gubitku fokusa, ako se broj unešenih karaktera ne poklapa sa zadatim, ispiše poruka o tome.

Dat je unos (input):

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

U ovom unosu (input) atributi data-min i data-max sadrže opseg. Uredite tako da se pri gubitku fokusa, ako se broj unešenih karaktera ne uklapa u ovaj opseg, ispisala poruka o tome.