dataattribuutteja

Dataattribuutteja, eli data-atribuutteja, ovat HTML-elementteihin lisättyjä mukautettuja attribuutteja, joiden nimi alkaa data-. HTML5-standardi sallii niiden käyttämisen lisätietojen tallentamiseen elementin käsittelyä varten ilman, että ne vaikuttavat ulkoasuun tai semanttisiin ominaisuuksiin. Niiden tarkoituksena on tarjota skripteille käyttöön sopivaa metadataa.

Attribuutin nimeä seuraa data- ja sen jälkeen yksi tai useampi merkki; nimi voi sisältää kirjaimia, numeroita ja väliviivoja (esimerkiksi data-user-id, data-color). Arvon on oltava merkkijono; arvo voi olla tyhjä. Data-atribuutteja voi käyttää kaikilla HTML-elementeillä, ja ne ovat validia HTML:ää.

JavaScriptissa data-atribuutteja käsitellään elementin dataset-ominaisuuden kautta. Esimerkiksi data-user-id vastaa dataset.userId, data-foo-bar vastaa dataset.fooBar. Arvot säilyvät merkkijonoina; tarvittaessa ne voidaan muuntaa numeroiksi tai booleaneiksi (esim. Number tai parseInt/parseFloat). Arvoihin pääsee myös getAttribute('data-...') tai setAttribute()-menetelmillä.

CSS:llä voi valita elementtejä data-atribuutin perusteella käyttäen attribuuttivalitsimia, kuten [data-user-id] tai [data-role="admin"].

Käyttöön liittyvät näkökohdat: data-atribuutteja käytetään tallentamaan pieniä, klientoille tarkoitettua metadataa ilman visuaalista vaikutusta. Ne ovat osa HTML-tiedostoa, ne ovat kevyitä ja helposti muokattavissa JavaScriptillä, mutta niitä ei tulisi käyttää suurien tietomäärien säilyttämiseen eikä tietojen turvallisuutta tai luotettavuutta vaativiin tarkoituksiin.

Esimerkki: <div data-user-id="123" data-role="admin"></div>... ja JavaScriptissa const id = div.dataset.userId; const role = div.dataset.role;.