HTML5 data-* Custom Properties

In jquery, attr and prop mentioned that prior to IE9, if using property improperly would cause a memory leak, and the difference between attribute and property would be a headache, adding HTML5 in data-* The way to customize properties, so-called data-* is actually the data-prefix plus a custom property name, using such a structure can be stored data. Using data-* can solve the situation of custom attribute confusion and Rogue.

Read/write mode

Data-* is available in two ways, and can be written directly on the HTML element label.

<div id="test" data-age=">    " click here </div>

The data-age is a custom property , and of course we can manipulate it with JavaScript, and the element in HTML5 has a DataSet attribute. This is a collection of key-value pairs of type Domstringmap

var test = document.getElementById ('test');     ' Byron ';

This adds a data-my custom attribute to the div and uses JavaScript to manipulate the dataset with two things to be aware of

1. We need to remove the prefix data-* when adding or reading attributes, as in the example above we do not use test.dataset.data-my = ' Byron ';

2. If the property name also contains hyphens (-), you need to go to the hump naming method, but if you use selectors in CSS, we need to use the hyphen format

Append write to code just now

<style type="text/css">[Data-birth-Date]{　　Background-color: #0f0;　　width:100px; margin:20px;}
</style>

Browser compatibility

The bad news is that data-* 's browser compatibility is not very optimistic

• Internet Explorer 11+
• Chrome 8+
• Firefox 6.0+
• Opera 11.10+
• Safari 6+

HTML5 data-* Custom Properties