Using Data attributes

This article is translated by me from: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

HTML5 is an extensibility design that originally intended that data should be associated with a particular element, but that no definition is required. The Data-* property allows us to store extra information in the HTML element within the standard, without having to use classList，标准外属性，DOM额外属性或是 tricks like setuserdata .

HTML syntax

The syntax is very simple. All on the element to data-开头的属性为数据属性。比如说你 have a piece of article, you want to store some extra information but you don't have any visual representation. Please use the data properties:

1 < article 2   ID = "Electriccars" 3   data-columns= "3"4  data-index-number= "12314" 5   data-parent= "Cars">6 ... 7 </ article >

JavaScript Access

Using JavaScript externally to access the values of these properties is also very simple. You can use {{domxref ("Element.getattribute", "getattribute ()")}} to read them with their full HTML names, but the standard defines a simpler method: {{Domxref (" Domstringmap ")}} You can read to the data using {{Domxref (" Htmlelement.dataset "," DataSet ")}}.

To get a data attribute through dataset the object, get the property by the part of the attribute name after data- (Note tha T dashes is converted to CamelCase).

By dataset对象去获取到数据属性， getting the property name to start with data-content

var article = document.queryselector (' #electriccars '//  "3"// " 12314 "//  " Cars "

Each property is a read-write String. In the example above,article.dataset.columns = 5.将会调整属性的值为5。

CSS Access

Note that the data attributes is set to HTML properties and they can be accessed by CSS as well. For example, you can use the function {{cssxref ("attr")}} to display the contents of Data-parent by using generated content:

{  content: attr (data-parent);}

You can also use the property selector in CSS to change the style based on data:

1{2  width: 400px;  3 }4{5  width: 600px;  6 }

You can see all the demos in this Jsbin instance.

The Data property can also store changing information, such as the game's score. Using CSS selectors and JavaScript to access the fancy effect that you get, here you don't need to write your regular programming. Please refer to this video (JSBin example).

Issues

Do not store content that needs to be displayed and accessed in the data attribute, because some other technologies may not be able to access them. In addition, the crawler cannot index the value of data attribute.

IE's support and display results are the most important issues to discuss. Ie11+ supports this standard, but all earlier versions do not support dataset。为了支持IE10及以下的版本，你必须使用 {{domxref ("Element.getattribute", "getattribute ()")}} to access. In addition, reading the data-attributes behavior is slower than JS store data . Use dataset is slower than using getattribute () to read data.

See

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

Using Data attributes