Brukerdefinerte attributter i JavaScript
I HTML er det tillatt å legge til egne, brukerdefinerte
attributter til tagger. Slike attributter må starte
med data-, og deretter kan det komme ethvert
attributtnavn som passer deg.
Brukerdefinerte attributter kan brukes på et enormt antall forskjellige måter. Mange av disse metodene vil vi studere videre i opplæringen, og enda flere vil du kunne finne på selv i fremtiden.
Tilgang til slike attributter er ikke ordnet på en standard
måte. Man kan ikke bare referere til elementets egenskap med samme navn,
slik vi gjorde tidligere,
men må bruke en spesiell egenskap
dataset, deretter skrives attributtnavnet
uten data- etter en punktum. For eksempel,
hvis attributtet vårt heter data-test,
vil vi for å få tilgang til det skrive elem.dataset.test,
der elem er variabelen med elementet vårt.
La oss se på et eksempel. Anta at vi har følgende element:
<div id="elem" data-num="1000"></div>
La oss skrive ut verdien av dens attributt data-num:
let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // skriver ut 1000
Og la oss tildele en annen verdi til dette attributtet:
let elem = document.querySelector('#elem');
elem.dataset.num = 123;
Følgende kode er gitt:
<div id="elem" data-text="str">text</div>
Gjør slik at ved et klikk på div-en, legges innholdet
i dens attributt data-text til slutten av
dens tekst.
Det er gitt div-er som inneholder sitt ordensnummer
i attributtet data-num:
<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>
Gjør slik at ved et klikk på en hvilken som helst av div-ene, skrives dens ordensnummer på slutten av den.
Det er gitt en knapp. Gjør slik at denne knappen teller antall klikk på den, og registrerer dem i et brukerdefinert attributt. La det ved et klikk på en annen knapp skrives ut på skjermen hvor mange klikk som ble utført på den første knappen.
Det er gitt et input-felt:
<input id="elem" data-length="5">
I dette input-feltet inneholder attributtet data-length
antall tegn som må skrives inn i input-feltet. Gjør slik at ved tap av
fokus, hvis antall innskrevne tegn
ikke samsvarer med det angitte, skrives en melding ut om det.
Det er gitt et input-felt:
<input id="elem" data-min="5" data-max="10">
I dette input-feltet inneholder attributtene data-min og
data-max et spekter. Gjør
slik at ved tap av fokus, hvis antallet
innskrevne tegn ikke faller innenfor dette spekteret,
skrives en melding ut om det.
