Mukautetut attribuutit JavaScriptissä
HTML:ssä on sallittua lisätä omia, mukautettuja
attribuutteja elementteihin. Tällaisten attribuuttien tulee alkaa
data-, minkä jälkeen voi tulla mikä tahansa
attribuutin nimi, joka on sinulle sopiva.
Mukautettuja attribuutteja voidaan käyttää lukemattomilla eri tavoilla. Monet näistä tavoista opimme myöhemmin oppaassa, ja vielä enemmän voit itse keksiä niitä tulevaisuudessa.
Näihin attribuutteihin viittaaminen ei toimi standardilla
tavalla. Ei voi yksinkertaisesti viitata samannimiseen
elementin ominaisuuteen, kuten teimme aiemmin,
vaan on käytettävä erityistä ominaisuutta
dataset, jonka jälkeen pisteellä
kirjoitetaan attribuutin nimi ilman data-. Esimerkiksi,
jos attribuuttimme on nimeltään data-test,
viitataksemme siihen kirjoitamme elem.dataset.test,
missä elem on muuttuja, joka sisältää elementtimme.
Katsotaanpa esimerkkiä. Oletetaan, että meillä on tällainen elementti:
<div id="elem" data-num="1000"></div>
Tulostetaan näytölle sen attribuutin data-num arvo:
let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // tulostaa 1000
Ja nyt annetaan tälle attribuutille toinen arvo:
let elem = document.querySelector('#elem');
elem.dataset.num = 123;
Annettu seuraava koodi:
<div id="elem" data-text="str">text</div>
Tee niin, että diviä klikkaamalla sen tekstin
loppuun lisätään sen attribuutin data-text
sisältö.
Annettuna div-elementit, jotka sisältävät attribuutissa data-num
omassa järjestysnumeronsa:
<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>
Tee niin, että minkä tahansa divin klikkaamalla sille sen loppuun kirjoitetaan sen järjestysnumero.
Annettuna painike. Tee niin, että tämä painike laskee napsautusten määrän siihen, tallentaen ne johonkin mukautettuun attribuuttiin. Kun toista painiketta napsautetaan, näytölle tulostetaan, kuinka monta napsautusta ensimmäiselle painikkeelle tehtiin.
Annettuna syötekenttä:
<input id="elem" data-length="5">
Tässä syötekentässä attribuutissa data-length
on merkkien määrä, joka on syötettävä syötekenttään.
Tee niin, että kohdistimen menettämisen yhteydessä,
jos syötettyjen merkkien määrä
ei vastaa asetettua määrää, tulostuu siitä viesti.
Annettuna syötekenttä:
<input id="elem" data-min="5" data-max="10">
Tässä syötekentässä attribuutit data-min ja
data-max sisältävät vaihteluvälin. Tee
niin, että kohdistimen menettämisen yhteydessä, jos syötettyjen
merkkien määrä ei kuulu tälle välille,
tulostuu siitä viesti.
