HTML5中'data-'属性有什么用
小编给大家分享一下HTML5中'data-'属性有什么用，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联网站建设服务商，为中小企业提供成都网站建设、网站制作服务，网站设计，绵阳服务器托管等一站式综合服务型公司，专业打造企业形象网站，让您在众多竞争对手中脱颖而出创新互联。
在大家查看HTML时，经常会看到data-role、data-theme等的使用，比如：通过如下代码即可实现页眉的效果：
我是标题
为什么写一个data-role="header"就能实现底部为黑色、文字居中显示的效果呢？
本文提供一种最简单的实现办法，让大家对这些用法有个直观的了解。
我们写一个html页面，自定义一个data-chb="header"的属性，希望具备这个属性的div区域背景颜色为黑色，文字为白色，居中显示；不具备data-chb自定义属性的div按照默认方式显示，html代码如下：
我是使用了data-chb自定义属性的div
我没有使用data-chb自定义属性，该怎么展现就怎么展现；
要想实现"背景颜色为黑色，文字为白色，居中显示"的显示效果，我们定义如下的css：
然后我们通过如下js方法实现在页面加载时，动态添加css定义，改变具备data-chb属性的div的显示样式：
window.onload=function(){
var elems = document.getElementsByTagName("div");
if(elems!=null&&elems.length>0){
var length = elems.length;
//遍历所有DIV控件
for(var i=0;i
当然此属性除了以上作用外，还有其他作用，如通过JS来构造数据，填充数据等；
看完了这篇文章，相信你对“HTML5中'data-'属性有什么用”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
文章标题：HTML5中'data-'属性有什么用
网页地址：
http://chengdu.cdxwcx.cn/article/iepepp.html
