The data-toppings attribute can be accessed using the following code:
var pizza = document.getElementById("pizza");
var toppings = pizza.dataset.toppings;
<< "cheese, tomato, mushroom"
Notice that the data- prefix is dropped. To access the attribute, toppings is used as if
it's a property of the dataset object. If a data- attribute's name contains hyphens, they
are replaced with camel-case notation, so data-max-length would be accessed using
Note: Browser Support
The support for the data- attribute is generally very good in modern
browsers ... even Internet Explorer 8 has partial support! Some older
browsers are unable to understand the dataset property, however, but any
data- attribute can be found using the standard getAttribute method.
So the previous code could be replaced with the following if you still need
to support older browsers:
var toppings =
object or value as a JSON string and then performing type-conversion later as required.
Data attributes provide a convenient way of adding data directly into the HTML markup,
enabling a richer user experience. More information is available at SitePoint.
Search WWH ::