自動目錄
html5 中元件中多了一個 data-*的屬性[1]，*可為任何字串。
<element data-*="somevalue">
這個屬性非常的方便，當我知道的時候，真的超高興的。因為我以前都用「不符規範」的方式在傳值，雖然可以達到目的，但一直覺得弱弱的。
當在標籤中設定這個屬性後，在傳值取值就非常方便，只需要透過 jquery 的attr或data函數即可。以下舉例：
<a href="javascript:void();" data-target='comment' data-id="123" class="reportit">按我</a>
當我們按下連結後，執行 jquery 取值及賦值：
取值
$(".reportit").click(function(){
var t= $(this).attr('data-target');
var t= $(this).data('target'); //推薦寫法
});
javascript 的方法
var t=this.dataset.target;
賦值
$(".reportit").click(function(){
$(this).attr('data-target','school');
$(this).data('target','school'); //推薦寫法
});
javascript 的方法
this.dataset.target="3333";
CSS3寫法
article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}
參考資料
[1] W3C HTML data-* Attributes ,HTML DOM querySelector() Method
原文 2014-11-29 10:55:30
