114网址导航Using data attributes
This article needs a technical review.
This article needs an editorial review.
is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning.
allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or .
HTML syntax
The syntax is simple. Any attribute on any element whose attribute name starts with data- is a data attribute. Say you have an article and you want to store some extra information that doesn’t have any visual representation. Just use data attributes for that:
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars"&
&/article&
JavaScript access
Reading the values of these attributes out in
is also very simple. You could use
with their full HTML name to read them, but the standard defines a simpler way: a
you can read out via a
To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase).
var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
Each property is a string and can be read and written. In the above case setting article.dataset.columns = 5 would change that attribute to "5".
CSS access
Note that, as data attributes are plain HTML attributes, you can even access them from . For example to show the parent data on the article you can use
in CSS with the
article::before {
content: attr(data-parent);
You can also use the
in CSS to change styles according to the data:
article[data-columns='3'] {
width: 400
article[data-columns='4'] {
width: 600
You can see all this working together .
Data attributes can also be stored to contain information that is constantly changing, like scores in a game. Using the CSS selectors and JavaScript access here this allows you to build some nifty effects without having to write your own display routines. See
for an example using generated content and CSS transitions ().
Since data values are strings, all values must have quotes or else the styling won't have any effect.
Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index data attributes' values.
The main issues to consider are Internet Explorer support and performance. Internet Explorer 11+ provides support for the standard, but all earlier versions . To support IE 10 and under you need to access data attributes with
instead. Also, the
compared to storing this data in a JS data warehouse is poor. Using dataset is even slower than reading the data out with getAttribute().
That said, though, for custom element-associated metadata, they are a great solution.
In Firefox 49.0.2 (and perhaps earlier/later versions), the data attributes that exceed 1022 attributes will not be read by Javascript (EcmaScript 4).
This article is adapted from .
Custom attributes are also supported in SVG 2; see
for more information.
(Sitepoint)
Document Tags and Contributors
&Contributors to this page:
&Last updated by:
Nov 8, :56 AM
Learn the best of web development
Sign up for our newsletter:
I'm okay with Mozilla handling my info as explained in this .
Sign up now
Thanks! Please check your inbox to confirm your subscription.
If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.
Hide Newsletter Sign-up}