HTML5 data-* Custom Attributes, html5data-custom

HTML5 data-* Custom Attributes, html5data-custom
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. At present, there are many frameworks that adopt such an approach. The most common one is jQueryMobile.
The usage example is as follows:

<Div id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "pseudo expert"> </div>

In traditional practices, we can use jquery as follows:

$("#head").attr("data-home");$("#head").attr("data-home","new");

Or js method:
In IE browser, we can directly call it after obtaining the object.

document.getElementById("head").["data-home"];document.getElementById("head").["data-home"] = "new";

In Firefox and Google browsers, we can call the getAttribute method:

document.getElementById("head").getAttribute("data-home");document.getElementById("head").setAttribute("data-home","new");

Simple operation method in HTML5: (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-home 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.

<Div id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "pseudo expert" data-date-of-birth> QQ group: 135430763 </div> <script type = "text/javascript"> var el = document. querySelector ('# head'); console. log (el. id); console. log (el. dataset); // A DOMStringMapconsole. log (el. dataset. home); console. log (el. dataset. author); console. log (el. dataset. dateOfBirth); el. dataset. dateOfBirth = '1970-01-05 '; // set the value of data-date-of-birth. // judge the property console. log ('stattr' in el. dataset); // falseel. dataset. testAttr = 'testattr '; console. log ('stattr' in el. dataset); // true </script>

If you want to delete a data-attribute, you can do this: delete el. dataset. home; or el. dataset. home = null ;.
This operation is not very convenient. However, some browsers may not. Therefore, it is best to use getAttribute and setAttribute during this period or use them with jquery.
Data-attribute Selector
During actual development, you can select relevant elements based on custom data-attributes. For example, use querySelectorAll to select an element:
// Select all elements that contain the 'data-div 'attribute
Document. querySelectorAll ('[data-div]');
// Select all elements that contain 'data-a-href 'whose attribute value is red
Document. querySelectorAll ('[data-a-href = "#"]');
Similarly, we can set CSS styles for corresponding elements through data-attribute values. For example, the following example:

<Style type = "text/css">. head {width: 256px; height: 200px ;}. head [data-a = 'btn-a'] {color: brown }. head [data-a = 'btn-color'] {color: red} </style> <div class = "head" data-qq = "qq group: 135430763 "data-a =" btn-a "> button </div> <div class =" head "data-qq =" qq group: 135430763 "data-a =" btn-color "> button </div>

Welcome to my blog! If you have any questions, please join the QQ group: 135430763 to learn together!

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.