Vartotojo atributai JavaScript

HTML leidžia pridėti savo, vartotojo atributus žymoms. Tokie atributai turi prasidėti su data-, o po to gali būti bet koks atributo pavadinimas, kuris jums patogus.

Vartotojo atributai gali būti naudojami dideliu skaičiumi įvairių būdų. Daugelį šių būdų mes išnagrinėsime vėliau šiame vadovėlyje, o dar daugiau galėsite ateityje išrasti patys.

Kreipimasis į tokius atributus yra nestandartinis. Negalima tiesiog kreiptis į to paties pavadinimo elemento savybę, kaip mes tai darėme anksčiau, o reikia naudoti specialią savybę dataset, po kurios per tašką rašomas atributo vardas be data-. Pavyzdžiui, jei mūsų atributas vadinasi data-test, tai norėdami pasiekti jį, mes rašysime elem.dataset.test, kur elem - kintamasis su mūsų elementu.

Pažiūrėkime pavyzdžiu. Tarkime, kad mes turime šį elementą:

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

Išveskime į ekraną jo atributo data-num reikšmę:

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

O dabar priskirkime šiam atributui kitą reikšmę:

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

Duotas toks kodas:

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

Padarykite taip, kad paspaudus ant div į jo pabaigą būtų pridėta jo atributo data-text turinys.

Duoti div, kuriuose atribute data-num yra jų eilės numeris:

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

Padarykite taip, kad paspaudus ant bet kurio div į jo pabaigą būtų įrašytas jo eilės numeris.

Duotas mygtukas. Padarykite taip, kad šis mygtukas skaičiuotų paspaudimų ant jo skaičių, įrašant jį į kokį nors vartotojo atributą. Tegul paspaudus ant kito mygtuko ekrane išvedama, kiek paspaudimų buvo atlikta ant pirmojo mygtuko.

Duotas input laukas:

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

Šiame input lauke atribute data-length yra simbolių skaičius, kurį reikia įvesti į input lauką. Padarykite taip, kad praradus fokusą, jei įvestų simbolių skaičius nesutampa su nurodytu, būtų išvedamas pranešimas apie tai.

Duotas input laukas:

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

Šiame input lauke atributai data-min ir data-max nurodo diapazoną. Padarykite taip, kad praradus fokusą, jei įvestų simbolių skaičius nepateko į šį diapazoną, būtų išvedamas pranešimas apie tai.