HTML5自定義data屬性
阿新 • • 發佈：2018-12-21
可能大家在使用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>
最後頁面顯示效果如下：
