歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

HTML5自定義data屬性

可能大家在使用jquery mobile時,經常會看到data-role、data-theme等的使用,比如:通過如下代碼即可實現頁眉的效果:

<div data-role="header">
    <h1>我是標題</h1>
</div>

通過手機浏覽,效果如下:

 

為什麼寫一個data-role="header"就能實現底部為黑色、文字居中顯示的效果呢?

 

本文提供一種最簡單的實現辦法,讓大家對這些用法有個直觀的了解。

 

我們寫一個html頁面,自定義一個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>

最後頁面顯示效果如下:

 

Copyright © Linux教程網 All Rights Reserved