Java Reference
In-Depth Information
The
data-
Attribute
The
data-
attribute is a way of embedding data in a web page using custom attributes that
are ignored by the browser. They're also private to a page, so shouldn't be used by an ex-
ternal service: their sole purpose is to be used by a JavaScript program. This means that they
are perfect for adding data to be used either by an external API or as a hook that the program
utilizes to access a particular element on the page.
The names of these attributes can be decided by the developer, but they must use the follow-
ing format:
• start with
data-
• contain only lowercase letters
• include an optional string value
Examples could be:
data-toppings="ham & pineapple"
data-hero="true"
data-dropdown
data-user="DAZ"
data-max-length="32"
The information contained in the attributes can be used to identify particular elements; for
example, all the elements with an attribute of
data-calendar
could be identified as cal-
endar widgets. The values of the attributes can also be used to filter different elements; for
example, we could find all the elements that have a
data-rating
value of
3
or more.
Each element has a
dataset
property that can be used to access any
data-
attributes it
contains. Here's an example of some markup:
<div id="pizza" data-toppings="cheese, tomato, mushroom">
Vegetable Deluxe Pizza
</div>
