When using jquerymobile, you may often see the use of data-role and data-theme. These are HTML5 custom attributes, for more information about how to use jquery mobile, you may often see data-role and data-theme. For example, you can use the following code to implement the header effect:
The Code is as follows:
I am the title
Browsing through a mobile phone has the following effect:
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 p region with this attribute will be black, the text will be white, and the text will be displayed in the center; p that does not have the custom properties of data-chb is displayed by default. The html code is as follows:
The Code is as follows:
I used the data-chb custom attribute p
I didn't use data-chb custom attributes, so how can I present them;
To achieve the "black background color, white text, center display" display effect, we define the following css:
The Code is as follows:
Then, we use the following js method to dynamically add css definitions during page loading to change the display style of p with the data-chb attribute:
The Code is as follows: