HTML5自定义data属性

最新推荐文章于 2024-08-03 16:11:42 发布

Sky786905664

最新推荐文章于 2024-08-03 16:11:42 发布

阅读量1.2k

点赞数

分类专栏： js 前端

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

30 篇文章 0 订阅

订阅专栏

可能大家在使用jQuery mobile时，经常会看到data-role、data-theme等的使用，比如：通过如下代码即可实现页眉的效果：

[html]view plaincopy 
    
 <div data-role="header">  
     <h1>我是标题</h1>  
 </div>  

通过手机浏览，效果如下：

为什么写一个data-role="header"就能实现底部为黑色、文字居中显示的效果呢？

本文提供一种最简单的实现办法，让大家对这些用法有个直观的了解。

我们写一个html页面，自定义一个data-chb="header"的属性，希望具备这个属性的div区域背景颜色为黑色，文字为白色，居中显示；不具备data-chb自定义属性的div按照默认方式显示，html代码如下：

[html]view plaincopy 
    
 <body>  
   <div data-chb="header">  
     <h1>我是使用了data-chb自定义属性的div</h1>  
   </div>  
   <br/>  
   <div>  
     我没有使用data-chb自定义属性，该怎么展现就怎么展现；  
   </div>  
 </body>  

要想实现"背景颜色为黑色，文字为白色，居中显示"的显示效果，我们定义如下的css：

[css]view plaincopy 
    
  <style>  
  .ui_header {  
   background-color: black;  
   text-align: center;  
   color:white;  
   border:1px solid #000;  
 }  
  </style>  

然后我们通过如下js方法实现在页面加载时，动态添加css定义，改变具备data-chb属性的div的显示样式：

[javascript]view plaincopy 
    
   <script type="text/javascript">  
   window.οnlοad=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>  