[精讚] [會員登入]
6782

[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 畫出粗外框表格的方法 (粗框表格) 在畫表格的時候,習慣上表格的外框要比內部的線條來得粗,不但比較美觀,而且看起來比較完整

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

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

[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字,可能是為了複製或是為了看他清楚點,這篇來改變他選擇時的背影色。

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

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

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

談借錢 人借錢時手心向上頭向下,人還錢時手心向下頭向上

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

維修冰箱 維修冰箱

設計的工作絕不接受比價 拿買陽春麵的價格想買牛肉麵,寧願倒掉也不賣

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