HTML5’s data-*custom attribute

HTML5 adds a new feature which is the custom data attribute, which is the data-*custom attribute. In HTML5, we can use data- as the prefix to set the custom attributes we need to store some data. Of course, definition and data access can be carried out through scripts in advanced browsers. Very useful in project practice. There are currently many frameworks that adopt this approach, and the most common one is jQueryMobile.
Specific usage examples are as follows:

<p id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家"></p>

In the traditional approach, we can use it with jquery, as follows:

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

Or pure js approach:
In IE browser, We can just call it directly after getting the object

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

In Firefox and Google Chrome, we can call it through the getAttribute method:

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

Simple operation method in HTML5: ( The dataset attribute accesses the value of the data-* custom attribute)
This method accesses the value of the data-* custom attribute by accessing the dataset attribute of an element. The dataset attribute is part of the HTML5 JavaScript API and is used to return a DOMStringMap object with the data- attribute of all selected elements.
When using this method, instead of using the complete attribute name, such as data-home, to access data, the data- prefix should be removed.
Another thing to note is that if the data-attribute name contains a hyphen, for example: data-date-of-birth, the hyphen will be removed and converted to camel case naming. The previous attribute name will be converted The end should be: dateOfBirth.

<p id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家" data-date-of-birth>QQ群：135430763</p>  <script type="text/javascript">  
    var el = document.querySelector(&#39;#head&#39;);  
    console.log(el.id);   
    console.log(el.dataset);//一个DOMStringMap  
    console.log(el.dataset.home);   
    console.log(el.dataset.author);   
    console.log(el.dataset.dateOfBirth);   
    el.dataset.dateOfBirth = &#39;1985-01-05&#39;; // 设置data-date-of-birth的值.  
    //判断属性  
    console.log(&#39;testAttr&#39; in el.dataset);//false  
    el.dataset.testAttr = &#39;testAttr&#39;;  
    console.log(&#39;testAttr&#39; 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;.
Isn’t it very convenient to operate like this? But some browsers may not support it yet. Therefore, during this period, it is best to use getAttribute and setAttribute to operate or use it with jquery.
data-attribute selector
During actual development, relevant elements can be selected based on customized data-attributes. For example, use querySelectorAll to select elements:
//Select all elements containing the 'data-p' attribute
document.querySelectorAll ('[data-p]') ;
//Select all elements containing 'data-a -href' element whose attribute value is red
document.querySelectorAll ('[data-a-href="#"]') ;
Similarly, we can also set CSS on the corresponding element through the data-attribute value Style, such as the following example:

<style type ="text/css">  
    .head {  
         width : 256px ;  
         height : 200px ;  
     }  

    .head[data-a=&#39;btn-a&#39;] {  
         color : brown  
    }  

    .head[data-a=&#39;btn-color&#39;] {  
         color : red  
    }  
</style>  
<p class = "head" data-qq = "7" data-a = "btn-a" > button按钮 </p>  
<p class = "head" data-qq = "1" data-a = "btn-color" > button按钮</p>

The above is the detailed content of What are the data-* custom attributes of HTML5?. For more information, please follow other related articles on the PHP Chinese website!