當大家查看HTML時，常會看到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; //遍歷所有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>當然此屬性除了以上作用外，還有其他作用，如透過JS來建構數據，填充數據等；
總結以上所述是小編給大家介紹的HTML5：'data-'屬性的作用，希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！