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://cqcxhl.cn/article/iepepp.html

重庆分公司，新征程启航

HTML5中'data-'属性有什么用

我是标题

我是使用了data-chb自定义属性的div

其他资讯