[精讚] [會員登入]
6933

[HTLM5] html元件上的 data-* 屬性

html5 中元件中多了一個 data-*的屬性,這個屬性超級好用

分享此文連結 //n.sfs.tw/10432

分享連結 [HTLM5] html元件上的 data-* 屬性@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-25 10:00:30 最後編修
2016-12-14 23:22:24 By 張○○
 

自動目錄

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

END

你可能感興趣的文章

[CSS] HTML 畫出粗外框表格的方法 (粗框表格) 在畫表格的時候,習慣上表格的外框要比內部的線條來得粗,不但比較美觀,而且看起來比較完整

[HTML] 讓表格整欄上色的方法 過去我們要讓表格整欄上色,都得用很不方便的方法:該儲存格設定一個類別,指定他的樣式,現在有更好的方法

[HTLM5] 表單number和range輸入類型 介紹HTML5和數字有關的輸入類型number/range 等類型

讓radio box 或checkbox 好按 在行動裝置下,radio box及checkbox變得很難按得到

textarea計算字數和行數 textarea可以大量的放入文字,但要如何計算字數和行數呢?

[CSS] placeholder 屬性的CSS怎麼設定? 常會用到的placeholder可以在沒填值時有提示的文字,想要改變格式該怎麼做?

隨機好文

[MAC] 截取螢幕畫面的方法 截取螢幕畫面的方法,在MAC中叫作螢幕快照,英文是screenshot

SELinux 常用指令和檔案 在Redhat系列中,Centos5以後加入了selinux,他並沒有這麼可怕,不必每次看到Selinux ,就想把他

UTF8中文字/全形一覽 快速查詢urf-8的中文字,共計13246中文字(5401常用字+7652罕用字+日文或編號),292全形符號,27半形符號。

UTF-8的網頁但IE8一片空白 UTF8編碼的網頁在Firefox 正常顯示、但IE8 就是空白,IE8編碼設定是「自動偵測」可是自動偵測到的是 big5...

[NetBeans] 使用git複製別人的專案 NetBeans使用git複製別人的專案及版本控制