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.

<ID= "test" data-age= "$"></div>      

The Data-age is a custom property, and of course we can manipulate it with JavaScript, and the element in HTML5 will have a DataSet attribute, which is a domstringmap type of key-value pair collection

var test = document.getElementById (' test ');        test.dataset.my = ' 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 a property, as in the example above we do not use test.dataset. The form of 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>      

test.dataset.birthDate = ' 19890615 ';

This allows us to set the Data-birth-date custom property through JavaScript, adding some styles to the div in the CSS style sheet to see the effect

Reading is also done through the DataSet object, using "." To get the property, you also need to remove the data-prefix, the hyphen needs to be converted to hump naming

var test = document.getElementById (' test ');        test.dataset.my = ' Byron ';        test.dataset.birthDate = ' 19890615 ';        function () {alert (this.dataset.age+ ' + this. dataset.birthdate);}      

Getattribute/setattribute

Some students may ask what is the difference between this and getattribute/setattribute besides naming, let's take a look

var test = document.getElementById (' test ');        test.dataset.birthDate = ' 19890615 ';        Test.setattribute (' age ', +);        Test.setattribute (' data-sex ', ' Male ');        /         ////////Male

So we can see that both have the property set to the attribute (nonsense, or others can call a custom attribute), that is, Getattribute/setattribute can manipulate all the dataset contents, The dataset content is only a subset of the attribute, especially if it is named, but only the attribute with the data-prefix in the dataset (there is no age=25 that).

So why do we have to use data-*, one of the biggest advantage is that we can all the custom properties in the DataSet object management, traverse ah God horse is very convenient, and not fragmented, so use is good.

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+

One of the ie11+ is a bright blind partner's eyes, it seems to want to fully use this property road long its repair far

Http://www.cnblogs.com/dolphinX/p/3348458.html

HTML5 data-* Custom Properties