Comment: Maybe when you use jquery mobile, you will often see the use of data-role, data-theme, etc. These are HTML5 custom attributes. This article has compiled some. Friends who need it can refer to it.
Maybe when you use jquery mobile, you will often see data-role, data-theme, etc., for example: the following code can achieve the effect of the header:
<div data-role="header">
<h1>I am the title</h1>
</div>
Browse through your mobile phone, the effect is as follows:
Why can you achieve the effect of black at the bottom and centering the text by writing a data-role=header?
This article provides the simplest way to implement it, so that everyone can have an intuitive understanding of these usages.
We write an html page to customize a data-chb=header attribute. We hope that the background color of the div area with this attribute is black, the text is white, and the center is displayed; the div that does not have data-chb custom attribute is displayed in the default mode. The html code is as follows:
<body>
<div data-chb="header">
<h1>I used the div of the data-chb custom attribute</h1>
</div>
<br/>
<div>
I did not use data-chb to customize the attributes, so I would show them as they should;
</div>
</body>
To achieve the display effect of black background color, white text, and center display, 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 when the page is loaded, and change the display style of the div with 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;
//Transfuse all DIV controls
for(var i=0;i<length;i++){
var elem = elems[i];
//Get the custom properties of the control
var customAttr = elem.dataset.chb;
//You can also obtain custom properties by the following method
//var customAttr = elem.dataset["chb"];
//If it is the header value we have predefined, it means it needs to be processed
if(customAttr=="header"){
//Add style
elem.setAttribute("class","ui_header");
}
}
}
}
</script>
The final page displays the following effect:
People always like to add custom properties to HTML tags to store and manipulate data. But the problem with doing this is that you don't know if other scripts will reset your custom properties in the future. In addition, your html syntax does not comply with the HTML specifications, as well as some other side effects. This is why you have added a custom data property to the HTML5 specification, and you can do a lot of useful things with it.
You can read the detailed specifications of HTML5, but the usage of this custom data attribute is very simple. You can add any attribute starting with data- to the HTML tag. These attributes are not displayed on the page. It will not affect your page layout and style, but it is readable and writable.
The following snippet is a valid HTML5 tag:
<div
data-myid="3e4ae6c4e">Some awesome data</div>
But, how do you read this data? You can certainly iterate through the page elements to read the properties you want, but jquery has built-in methods to manipulate these properties. Use jQuery's .data() method to access these data-* properties. One of the methods is .data(obj), which appears after jQuery 1.4.3 version, and it can return the corresponding data attribute.
For example, you can use the following writing method to read the data-myid attribute value:
var myid= jQuery("#awesome").data('myid');
console.log(myid); You can also use json syntax in the data-* property, for example, if you write the following html:
<div data-awesome='{"game":"on"}'></div>
You can directly access this data through js. Through the key value of json, you can get the corresponding value:
var gameStatus= jQuery("#awesome-json").data('awesome').game;
console.log(gameStatus); You can also assign values to the data-* attribute directly through the .data(key,value) method. An important thing you need to pay attention to is that these data-* attributes should be related to the element they are in, and do not treat them as storage tools for storing anything.
Translator adds: Although data-* is an attribute that only appears in HTML5, jquery is universal, so in non-HTML5 pages or browsers, you can still use the .data(obj) method to manipulate data.