[精讚] [會員登入]
6948

[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

你可能感興趣的文章

[HTML5] script 的新增屬性 defer, async script 的新增屬性 defer, async

表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用的標籤即可,但是要選取一欄呢?

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

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

CSS 的 !important 意義 網頁的前端工程師非常頭痛的事,就是同時要處理 IE和 FF等不同的瀏覽器,更糟的是 IE 又分成了 6 7 8三種版本,

[CSS] 背景 background css 中最常用的特性(property)之一就是 background ,這個有什麼好難的?事實上 backgroun

隨機好文

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

世紀帝國征服者新版本--被遺忘的帝國 世紀帝國征服者新版本--被遺忘的帝國 世紀二代的征服者是精典遊戲中的精典,aofe更好玩...

[PHP] 檢查IP是否在某個網段內 mtachcidr 要檢查IP是否在某個網段內,要寫幾行?10行?5行? 不用,只要2行。以下是我寫的 code /** * matchCI

原來KNOW-HOW這麼不值啊~~ 我把網路線拔了又插回去,把交換器重開,斷線的問題就解決了,所花的時間30秒..

安裝網頁套件管理程式 Bower 一個非常棒的Javascript套件管理程式bower,用完愛不釋手。