When you look at HTML, you often see the use of data-role, data-theme, etc. For example, the header effect can be achieved through the following code:
<div data-role=header> <h1>I am the title</h1> </div>
Why can writing a data-role=header achieve the effect of black bottom and centered text?
This article provides the simplest implementation method to give everyone an intuitive understanding of these usages.
We write an HTML page and customize a data-chb=header attribute. We hope that the background color of the div area with this attribute will be black, the text will be white, and it will be displayed in the center; divs that do not have the data-chb custom attribute will be displayed in the default way. , the html code is as follows:
<body> <div data-chb=header> <h1>I used the data-chb custom attribute for the div</h1> </div> <br/> <div> I did not use the data-chb custom attribute. , display it however you want; </div> </body>
To achieve a display effect where the background color is black, the text is white, and the display is centered, 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 and change the display style of divs with data-chb attributes when the page is loaded:
<script type=text/javascript> window.onload=function(){ var elems = document.getElementsByTagName(div); if(elems!=null&&elems.length>0){ var length = elems.length; //Traverse all DIVs Control for(var i=0;i<length;i++){ var elem = elems[i]; //Get the custom attributes of the control var customAttr = elem.dataset.chb; //You can also obtain custom attributes in the following way //var customAttr = elem.dataset[chb]; //If it is a header value that we have predefined, it means that it needs to be processed if(customAttr==header ){ //Add 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, filling data, etc.;
SummarizeThe above is the HTML5: 'data-' attribute introduced by the editor to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!