Using data-* attribute

原文地址：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

HTML5 is designed with extensibility for data that should be in the HTML, but not visible.data-* attributes allow us to store extra information on standard, semantic HTML elements without polluting the class name.

HTML Syntax

The syntax is easy. 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:

<article  id="electriccars"  data-columns="3"  data-indexnumber="12314"  data-parent="cars">...</article>

JavaScript Access

Reading those out in JavaScript is also very simple. You could use getAttribute() to read them but the standard defines a simpler way: aDOMStringMap you can read out via a dataset property:

var article = document.querySelector('#electriccars'),              data = article.dataset; // data.columns -> "3"// data.indexnumber -> "12314"// data.parent -> "cars"

Each property is a string (even if you omit the quotes in the HTML) and can be read and written. In the above case settingarticle.dataset.columns = 5 would change that attribute.

CSS Access

Now, as data attributes are plain HTML attributes you can even access them fromCSS. For example to show the parent data on the article you can use generated content in CSS with the attr function:

article::before {  content: attr(data-parent);}

You can also use the attribute selectors in CSS to change styles according to the data:

article[data-columns='3']{  width: 400px;}article[data-columns='4']{  width: 600px;}

You can see all this working together in this JSBin example.

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 the following screencast for an example using generated content and CSS transitions:

The code example shown in the screencast is also on JSBin.

Issues

Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers do not index data attributes' values.

Sadly enough it seems there is nothing that is so simple and useful that doesn’t come with a price. In this case the main issues to consider are that Internet Explorerdoes not support the dataset but you’d need to read them out withgetAttribute()  instead. The other issue is that the performance of reading data-attributes compared to storing this data in a JS data warehouse is bad. Usingdataset is even slower than reading the data out with getAttribute().

That said, though, for content that is not to be shown they are a great solution and maybe we can get them into the next IE soon.

See also

• This article is adapted from Using data attributes in JavaScript and CSS on hacks.mozilla.org.
• How to use HTML5 data attributes (Sitepoint)

Document Tags and Contributors

Tags:

• Guide
• NeedsUpdate
• Web
• HTML
• HTML5
• Advanced
• Example

Contributors to this page: Sheppy, groovecoder, jswisher, Jeremie, magnetikonline, kscarfone, teoli

Last updated by: Jeremie, Mar 7, 2014 4:24:05 AM

preference: HTMLElement.dataset

The HTMLElement.dataset property allows access, both in reading and writing mode, to all thecustom data attributes (data-*) set on the element. It is a map of DOMString, one entry for each custom data attribute.

The name of a custom data attribute begins with data-. It must followthe production rule of xml names, which means that it may contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_). Moreover, it should not contain ASCII capital letters (A to Z).

A custom data attribute name is transformed to a key for the DOMStringMap entry with the following rules

• the prefix data- is removed (including the dash);
• for any dash (U+002D) followed by an ASCII lowercase lettera to z, the dash is removed and the letter is transformed into its uppercase counterpart;
• other characters (including other dashes) are left unchanged.

The opposite transformation, that maps a key to an attribute name, uses the following rules:

• Restriction: A dash must not be immediately followed by an ASCII lowercase lettera to z (before the transformation);
• a prefix data- is added;
• any ASCII uppercase letter A to Z is transformed into a dash followed by its lowercase counterpart;
• other characters are left unchanged.

The restriction in the rules above ensures that the two transformations are the inverse one of the other.

For example, the attribute named data-abc-def corresponds to the keyabcDef.

Syntax

string = element.dataset.camelCasedName;element.dataset.camelCasedName = string;

Examples

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>var el = document.querySelector('#user');// el.id == 'user'// el.dataset.id === '1234567890'// el.dataset.user === 'johndoe'// el.dataset.dateOfBirth === ''el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.// 'someDataAttr' in el.dataset === falseel.dataset.someDataAttr = 'mydata';// 'someDataAttr' in el.dataset === true

Browser compatibility

• Desktop

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafariBasic support86.0 (6.0)1111.106

Mobile no support