Analysis of the Role of HTML5: '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:
<Div data-role = "header">Why write
data-role="header"What if the bottom is black and the text is displayed in the center?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:
<Body> <div data-chb = "header">To achieve the "black background color, white text, center display" display effect, we define the following css:
<style> .ui_header { background-color: black; text-align: center; color:white; border:1px solid #000; } </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:
<Script type = "text/javascript"> window. onload = function () {var elems = document. getElementsByTagName ("div"); if (elems! = Null & elems. length> 0) {var length = elems. length; // traverse all DIV controls for (var I = 0; I <length; I ++) {var elem = elems [I]; // obtain the custom property var customAttr = elem of the control. dataset. chb; // You can also obtain custom attributes using the following method: // var customAttr = elem. dataset ["chb"]; // if it is a pre-defined header value, it indicates that you need to process if (customAttr = "header") {// Add the style elem. setAttribute ("class", "ui_header") ;}}}</script>Of course, in addition to the above functions, this attribute also has other functions, such as constructing data through JS and filling data;
Summary
The above is the role of the HTML5: 'Data-'attribute introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!
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
