HTML5 custom data attributes, html5 Custom data

Source: Internet
Author: User

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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.