Lietotāja definēti atribūti JavaScript
HTML atļauts pievienot savus, lietotāja definētus
atribūtu elementiem. Šādiem atribūtiem jāsākas
ar data-, un pēc tam var būt jebkurš
atribūta nosaukums, kas jums ir ērts.
Lietotāja definēti atribūti var tikt izmantoti daudzos dažādos veidos. Daudzus no šiem veidiem mēs pētīsim tālāk apmācībā, un vēl vairāk jūs pats varēsiet izgudrot nākotnē.
Pieeja šādiem atribūtiem ir organizēta nestandarta
veidā. Nevar vienkārši piekļūt elementa īpašībai ar tādu pašu nosaukumu,
kā mēs to darījām iepriekš,
bet jāizmanto īpašā īpašība
dataset, pēc kura caur punktu
tiek rakstīts atribūta nosaukums bez data-. Piemēram,
ja mūsu atribūta nosaukums ir data-test,
tad, lai pie tam piekļūtu, mēs rakstīsim elem.dataset.test,
kur elem ir mainīgais ar mūsu elementu.
Apskatīsim piemērā. Pieņemsim, ka mums ir dots šāds elements:
<div id="elem" data-num="1000"></div>
Izvadīsim ekrānā tā atribūta data-num vērtību:
let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // izvadīs 1000
Un tagad piešķirsim šim atribūtam citu vērtību:
let elem = document.querySelector('#elem');
elem.dataset.num = 123;
Dots šāds kods:
<div id="elem" data-text="str">text</div>
Izdariet tā, lai, noklikšķinot uz div, tā teksta
beigās
tiktu pievienots tā atribūta
data-text saturs.
Doti divi, kas satur atribūtā data-num
savu kārtas numuru:
<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>
Izdariet tā, lai, noklikšķinot uz jebkura no diviem, tam beigās tiktu ierakstīts tā kārtas numurs.
Dota poga. Izdariet tā, lai šī poga saskaitītu klikšķu skaitu uz sevis, ierakdot tos kādā lietotāja definētā atribūtā. Lai, noklikšķinot uz citas pogas, ekrānā tiktu izvadīts, cik klikšķu bija uz pirmās pogas.
Dots input lauks:
<input id="elem" data-length="5">
Šajā input laukā atribūtā data-length
satur simbolu skaitu, kas jāievada input laukā. Izdariet tā, lai, zaudējot fokusu,
ja ievadīto simbolu skaits nesakrīt ar norādīto, tiktu izvadīts ziņojums par to.
Dots input lauks:
<input id="elem" data-min="5" data-max="10">
Šajā input laukā atribūti data-min un
data-max satur diapazonu. Izdariet
tā, lai, zaudējot fokusu, ja ievadīto
simbolu skaits neietilpst šajā diapazonā,
tiktu izvadīts ziņojums par to.
