Working with Data properties

Working with Data properties

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 the need for tricks like, standard out-of-the-box classList properties, Dom Extras, or setuserdata .

HTML syntax

The syntax is very simple. All data- attributes that begin on an element are data properties. For example, you have an article and you want to store some extra information that doesn't need to be displayed on the browser. Please use the Data property:

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

JavaScript Access Section

Using JavaScript externally to access the values of these properties is also very simple. You can getAttribute() read them with their full HTML names, but the standard defines a simpler approach: DOMStringMap You can use dataset read-to-data.

In order to use the dataset object to get to the data property, you need to get the part after data-in the property name (note that the name of the dash connection needs to be rewritten as camel orthography (e.g. "Index-number" to "IndexNumber").

1 var article = document.queryselector (' #electriccars '); 2  3 // "3" 4 // "12314" 5 // "Cars"

Each property is a read-write String. In the example above, the article.dataset.columns = 5 . Will adjust the value of the property to 5.

CSS Access Section

Note that the data attributes is set to HTML properties, and they can also be accessed by CSS. For example, you can use functions attr() to display the contents of Data-parent through generated content:

{ 2  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 the CSS selector and JavaScript to access it can make you fancy, and here you don't need to write code in a regular writing scheme. Please refer to this off-wall video (JSBin example).

Issuessection

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.

The support and display effect of

ie is the most important issue discussed. Ie11+ supports this standard, but all earlier versions do not support dataset. In order to support IE10 and the following versions, you must use GetAttribute () to access. In addition, reading  data-attributes behavior dataset   would be better than using getattribute () reads data slowly.

Still, this is a good solution for data related to elements.

In Firefox 49.0.2 (other versions are possible), JavaScript will not be able to read out data attributes (EcmaScript 4) that contain 1022 characters or more.

See section

• The article originates from the Using data attributes in JavaScript and the CSS on hacks.mozilla.org.
• Custom data properties are also supported in SVG 2; Please refer to SVGElement.dataset and data-* .
• How to use HTML5 data attributes (SitePoint)

Working with Data properties