HTML5 custom data attributes, html5 Custom data
When using jquery mobile, you may often see the use of data-role and data-theme. For example, you can use the following code to implement the header effect:
[Html]
<Div data-role = "header">
<H1> I am the title </Div>
Why 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:
[Html]
<Body>
<Div data-chb = "header">
<H1> I am a div using a custom property of data-chb </Div>
<Br/>
<Div>
I didn't use data-chb custom attributes, so how can I present them;
</Div>
</Body>
To achieve the "black background color, white text, center display" display effect, we define the following css:
[Css]
<Style>
. Ui_header {
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:
[Javascript]
<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 attributes of the control
Var customAttr = elem. dataset. chb;
// You can also obtain custom attributes as follows:
// Var customAttr = elem. dataset ["chb"];
// If it is a pre-defined header value, it indicates it needs to be processed
If (customAttr = "header "){
// Add a style
Elem. setAttribute ("class", "ui_header ");
}
}
}
}
</Script>
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
