自動目錄

• 取值
• 賦值
• CSS3寫法
• 參考資料

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

[2] Using data attributes

原文 2014-11-29 10:55:30