HTML5 data-* Custom Attributes, html5data-

HTML5 data-* Custom Attributes, html5data-

In earlier versions of jQuery, attr and prop mentioned that improper use of property in IE9 may cause memory leakage, and the difference between Attribute and Property is also a headache, the data-* method is added to HTML5 to customize attributes. The so-called data-* is actually the data-Prefix plus the custom attribute name. This structure can be used for data storage. Data-* can be used to solve the confusion and non-management of custom attributes.

Read/write mode

Data-* There are two ways to set and write data directly on HTML element tags.

<div id="test" data-age="24">        Click Here    </div>

Data-age is a type of custom attribute. Of course, we can also operate on it through JavaScript. All elements in HTML5 have a dataset attribute, this is a collection of DOMStringMap key-value pairs.

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

In this way, a data-my custom attribute is added to the div. There are two points to note when you operate dataset using JavaScript.

1. We need to remove the prefix data-* When adding or reading attributes. As in the above example, we didn't use the form of test. dataset. data-my = 'byron.

2. If the attribute name also contains hyphens (-), you need to convert it to the hump naming method. However, if you use a selector in CSS, you need to use the hyphen format.

Add content to the code just now

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

test.dataset.birthDate = '19890615';

In this way, we set the data-birth-date custom attribute through JavaScript, and added some styles to the div in the CSS style sheet to see the effect.

The dataset object is used to obtain the attribute during reading. You also need to remove the data-prefix and rename the hyphen into a camper.

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

GetAttribute/setAttribute

Some may ask if this is different from getAttribute/setAttribute. Let's take a look at it.

var test = document.getElementById('test');        test.dataset.birthDate = '19890615';        test.setAttribute('age', 25);        test.setAttribute('data-sex', 'male');        console.log(test.getAttribute('data-age')); //24        console.log(test.getAttribute('data-birth-date')); //19890516        console.log(test.dataset.age); //24        console.log(test.dataset.sex); //male

In this way, we can see that both attributes are set to attribute (nonsense, or custom attributes). That is to say, getAttribute/setAttribute can operate on all dataset content, dataset content is only a subset of the attribute. In particular, it is named, but dataset only has the attribute with the data-prefix (no age = 25 ).

So why do we need to use data-*? One of the biggest advantages is that we can manage all the custom attributes in the dataset object in a unified manner. It is very convenient to traverse all the attributes, it won't be scattered, so it's good to use it.

Browser compatibility

The poor message is that the browser compatibility of data-* is not optimistic.

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

Among them, IE11 + is simply the eyes of bright blind friends. It seems that it is a long way to use this attribute.

This article