HTML5: what is the role of the 'data-'attribute? html5data-
When you view HTML, you will often see the use of data-role and data-theme. For example, you can use the following code to implement the header effect:
1 <div data-role = "header"> 2Why can I write a data-role = "header" to achieve the effect of black at the bottom and text center display?
This article provides a simple implementation method to give you an intuitive understanding of these usages.
We will write an html page to customize a data-chb = "header" attribute. We hope that the background color of the div region with this attribute will be black, the text will be white, and the text will be displayed in the center; div with custom data-chb attributes not displayed by default. The html code is as follows:
1 <body> 2 <div data-chb = "header"> 3To achieve the "black background color, white text, center display" display effect, we define the following css:
1 <style> 2 .ui_header { 3 background-color: black; 4 text-align: center; 5 color:white; 6 border:1px solid #000; 7 } 8 </style>Then, we use the following js method to dynamically add css definitions during page loading to change the display style of the div with the data-chb attribute:
1 <script type = "text/javascript"> 2 window. onload = function () {3 var elems = document. getElementsByTagName ("div"); 4 if (elems! = Null & elems. length> 0) {5 var length = elems. length; 6 // traverse all DIV controls 7 for (var I = 0; I <length; I ++) {8 var elem = elems [I]; 9 // obtain the custom attribute 10 var customAttr = elem of the control. dataset. chb; 11 // You can also obtain Custom Attributes 12 // var customAttr = elem. dataset ["chb"]; 13 // if it is a pre-defined header value, it indicates that 14 if (customAttr = "header") needs to be processed ") {15 // Add a style 16 elem. setAttribute ("class", "ui_header"); 17} 18} 19} 20} 21 </script>Of course, in addition to the above functions, this attribute also has other functions, such as constructing data through JS and filling data;
Reprinted link: http://blog.csdn.net/yongxiaokang1/article/details/41644469
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
