[精讚] [會員登入]
237

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

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

此文完整連結 http://n.sfs.tw/10432

複製連結 [HTLM5] html元件上的 data-* 屬性@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2016-12-14 23:22:59 最後編修
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

你可能感興趣的文章

[HTLM5] 表單時間日期date/time輸入類型 介紹HTML5和時間有關的輸入類型date/datetime/datetime-local/month/time/week

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

[CSS] 多個 class 的表示法和寫法 網頁設計中常會用到CSS,他的一般格式是這樣的:

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

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

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

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

[HTLM5] 表單color、email、url、search、tel輸入類型 介紹HTML5好用的輸入類型:color、email、url,以及兩個形同雞肋的類型search、tel..

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

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

我有話要說


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

訪客留言

[無留言]

隨機好文

HP SAS硬碟leds燈號說明 HP SAS硬碟leds燈號(hp g7/g6系統適用)說明

[札記] 2016.7~12月札記 札記,只是札記

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

海棉寶寶超泡杯演奏的sweet victory 章魚哥和海棉寶寶在超泡杯的演奏歌曲

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