Kasutajamääratud atribuudid JavaScriptis

HTML-is on lubatud lisada oma, kasutajamääratud atribuudid elementidele. Sellised atribuudid peavad algama data-, millele järgneb suvaline atribuudi nimi, mis teile sobib.

Kasutajamääratud atribuute saab kasutada väga paljudel erinevatel viisidel. Paljud neist viisidest õpime edaspidi õppematerjalis ja veel rohkem suudate te ise leiutada.

Nende atribuutide poole pöördumine ei toimu standardsel viisil. Ei saa lihtsalt pöörduda elemendi samanimelise omaduse poole, nagu me seda varem tegime, vaid tuleb kasutada spetsiaalset omadust dataset, millele järgneb punkti kaudu atribuudi nimi ilma data-ta. Näiteks, kui meie atribuudi nimi on data-test, siis selle poole pöördumiseks kirjutame elem.dataset.test, kus elem on meie elemendiga muutuja.

Vaatame näidet. Olgu meil antud järgmine element:

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

Kuvame ekraanile tema atribuudi data-num väärtuse:

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

Ja nüüd omistame sellele atribuudile teise väärtuse:

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

Antud on järgmine kood:

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

Tehke nii, et divile klõpsates lisataks tema teksti lõppu tema atribuudi data-text sisu.

Antud on div-id, mis sisaldavad atribuudis data-num oma järjekorranumbrit:

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

Tehke nii, et mis tahes divile klõpsates kirjutataks tema lõppu tema järjekorranumber.

Antud on nupp. Tehke nii, et see nupp loeb klõpsude arvu sellel, kirjutades need mõnda kasutajamääratud atribuuti. Teisele nupule klõpsates kuvatakse ekraanile, mitu klõpsu esimese nupuga tehti.

Antud on input:

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

Selles inputis atribuudis data-length sisaldub sümbolite arv, mida tuleb inputi sisestada. Tehke nii, et fookuse kaotamisel, kui sisestatud sümbolite arv ei ühti etteantuga, kuvataks selle kohta teade.

Antud on input:

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

Selles inputis atribuudid data-min ja data-max sisaldavad vahemikku. Tehke nii, et fookuse kaotamisel, kui sisestatud sümbolite arv ei jää sellesse vahemikku, kuvatakse selle kohta teade.