Java Reference
In-Depth Information
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
maxLength
.
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 =
pizza.getAttribute("data-toppings");
The restriction of only using a string value can be overcome by encoding any JavaScript
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.
