HTML5 custom attribute data-* detailed introduction and JS operation examples

Comments: HTML5 adds a new function: custom data attributes, that is, data-* Custom Attributes. In HTML5, we can use data-as the prefix to set the custom attributes we need to store some data.

Of course, advanced browsers can use scripts to define and access data. It is useful in project practice.

For example:

The Code is as follows: <div id = "user" data-uid = "12345" data-uname = ""> </div>

Use attribute to access data-* custom attribute values

Using the attributes method to access data-* custom attribute values is very convenient:

The Code is as follows:
// Use getAttribute to obtain the data-attribute
Var user = document. getElementById ('user ');
Var userName = plant. getAttribute ('data-uname'); // userName = 'house'
Var userId = plant. getAttribute ('data-uid'); // userId = '20140901'

// Use setAttribute to set data-attributes
User. setAttribute ('data-site', 'HTTP: // www.jb51.net ');
This method works properly in all modern browsers, but it is not the purpose of using the Custom data-* attribute of HTML 5, otherwise, it is no different from the custom attributes we used previously. For example:

The Code is as follows:
<Div id = "user" uid = "12345" uname = ""> </div>
<Script>
// Use getAttribute to obtain the data-attribute
Var user = document. getElementById ('user ');
Var userName = plant. getAttribute ('uname'); // userName = 'house'
Var userId = plant. getAttribute ('uid'); // userId = '2013'

// Use setAttribute to set data-attributes
User. setAttribute ('SITE', 'HTTP: // www.jb51.net ');
</Script>
This "Raw" custom property is no different from the above data-* Custom property, and the knowledge property name is different.

Dataset attribute access data-* custom attribute value

In this way, you can access the dataset attribute of an element to access the value of the data-* custom attribute. This dataset attribute is part of the HTML5 JavaScript API and is used to return a DOMStringMap object for all data-attributes of the selected element.

When using this method, instead of using the complete attribute name, such as data-uid to access data, you should remove the data-prefix.

Note that if the data-attribute name contains a hyphen, for example, data-date-of-birth, the hyphen will be removed, and convert it to a camper name. The previous attribute name should be dateOfBirth after conversion.

The Code is as follows:
<Div id = "user" data-id = "1234567890" data-name = "" data-date-of-birth> dock </div>
<Script type = "text/javascript">
Var el = document. querySelector ('# user ');
Console. log (el. id); // 'user'
Console. log (el. dataset); // A DOMStringMap
Console. log (el. dataset. id); // '20140901'
Console. log (el. dataset. name); // 'house'
Console. log (el. dataset. dateOfBirth );//''
El. dataset. dateOfBirth = '1970-01-05 '; // set the value of data-date-of-birth.
Console. log ('somedataattr' in el. dataset); // false
El. dataset. someDataAttr = 'mydata ';
Console. log ('somedataattr' in el. dataset); // true
</Script>
If you want to delete a data-attribute, you can do this: delete el. dataset. id; or el. dataset. id = null ;.

The new dataset attribute is only available in Chrome 8 + Firefox (Gecko) 6.0 + Internet Explorer 11 + Opera 11.10 + Safari 6 + browsers, therefore, it is best to use getAttribute and setAttribute during this period.

About data-attribute Selector

During actual development, you may find it useful. You can select related elements based on custom data-attributes. For example, use querySelectorAll to select an element:

The Code is as follows:
// Select all elements that contain the 'data-flowing' attribute
Document. querySelectorAll ('[data-flowering]');

// Select all elements that contain 'data-text-color' whose attribute value is red
Document. querySelectorAll ('[data-text-color = "red"]');
Similarly, we can set CSS styles for corresponding elements through data-attribute values. For example, the following example:

The Code is as follows:
<Style type = "text/css">
. User {
Width: 256px;
Height: 200px;
}

. User [data-name = 'feiwen'] {
Color: brown
}

. User [data-name = 'css '] {
Color: red
}
</Style>
<Div class = "user" data-id = "123" data-name = "feiwen"> 1 </div>
<Div class = "user" data-id = "124" data-name = "css"> terminal </div>