在大伙儿查询HTML时，常常会看到data-role、data-theme等的应用，例如：根据以下编码便可完成页眉的实际效果：
<div data-role="header">
<h1>我是题目</h1>
</div>
为何写1个data-role="header"就可以完成底部为黑色、文本垂直居中显示信息的实际效果呢？
本文出示1种最简易的完成方法，让大伙儿对这些用法有个直观的掌握。
大家写1个html网页页面，自定1个data-chb="header"的特性，期待具有这个特性的div地区情况色调为黑色，文本为白色，垂直居中显示信息；不具有data-chb自定特性的div依照默认设置方法显示信息，html编码以下：
<body>
<div data-chb="header">
<h1>我是应用了data-chb自定特性的div</h1>
</div>
<br/>
<div>
我沒有应用data-chb自定特性，该如何呈现就如何呈现；
</div>
</body>
要想完成"情况色调为黑色，文本为白色，垂直居中显示信息"的显示信息实际效果，大家界定以下的css：
<style>
.ui_header {
background-color: black;
text-align: center;
color:white;
border:1px solid #000;
}
</style>
随后大家根据以下js方式完成在网页页面载入时，动态性加上css界定，更改具有data-chb特性的div的显示信息款式：
<script type="text/javascript">
window.onload=function(){
var elems = document.getElementsByTagName("div");
if(elems!=null&&elems.length>0){
var length = elems.length;
//遍历全部DIV控制
for(var i=0;i<length;i++){
var elem = elems[i];
//获得该控制的自定特性
var customAttr = elem.dataset.chb;
//还可以根据以下方法得到自定特性
//var customAttr = elem.dataset["chb"];
//假如是大家预先界定好的header值，表明必须解决
if(customAttr=="header"){
//加上款式
elem.setAttribute("class","ui_header");
}
}
}
}
</script>
自然此特性除以上功效外，也有别的功效，如根据JS来结构数据信息，填滥竽充数据等；
总结
以上所述是网编给大伙儿详细介绍的HTML5：'data-'特性的功效，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！