Dataset-ominaisuus

HTML-kielessä on sallittua lisätä omia attribuutteja tageihin, kunhan ne alkavat data-, jota seuraa mikä tahansa attribuutin nimi. Tällaisten attribuuttien käsittelyyn JavaScriptin kautta käytetään erityistä dataset-ominaisuutta.

Syntaksi

javascriptelementti.dataset.nimi;

Esimerkki

Luetaan attribuutin arvo:

html<div data-cost="1000"></div>

javascriptlet elem = document.querySelector('div');
let res = elem.dataset.cost;

console.log(res);

Koodin suorituksen tulos:

javascript'1000'

Esimerkki

Muutetaan attribuutin arvoa:

html<div data-cost="1000"></div>

javascriptlet elem = document.querySelector('div');
elem.dataset.cost = '2000';

Tuloksena koodi näyttää tältä:

html<div data-cost="2000"></div>

Katso myös