[精讚] [會員登入]
6930

[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

你可能感興趣的文章

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

如何讓瀏覽器每次都重新載入css、js、圖檔 不管怎麼刷新網頁,他總是跑出來舊的內容,這對開發的人來說很困擾...

[HTML] CSS中的折字換行或不換行(防止容器破壞) 使用者留言時故意來用一串長長的且沒有任何空白的長字串,把你的容器破壞得很難看...

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

產生模糊的文字 有時我們需要產生模糊的文字,類似毛玻璃看到的效果。

[HTML] 影像地圖 使用HTML的MAP標籤製作影像地圖

隨機好文

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

如何在linux下執行java 原生的java應用程式可以使用簡單的方法在console下面寫出來,適合作簡單的應用

詭異的創業思維 創業的思維中,有多少銀彈,有多少技術,有多少人脈,有多少時間等等,每個都要考慮進去,以熱忱建立的關係脆弱的像蘇打餅乾一樣..

外匯課程經驗 有天遇到某個朋友的正妹朋友,說她有個很棒的外匯投資課程,要我們去聽,只收場地費200大洋。她又說續效最差一個月也有1%,誰還在苦哈哈上班?

[Wildfly10] 發佈war檔 deploy war file onto wildfly10