編輯注：HTML中使用data-xx="xx"開頭標記的屬性到底有什么用，直接使用xx="xx"不是更簡單嗎？其實data-xx是HTML5的一個屬性，支持通過dataset來獲取它的屬性值，另外還兼容getAttribute和setAttribute，所以人們才會經(jīng)常使用這個屬性。

新的HTML5標準允許你在普通的元素標簽里，嵌入類似data-*的屬性，來實現(xiàn)一些簡單數(shù)據(jù)的存取。它的數(shù)量不受限制，并且也能由javascript動態(tài)修改，也支持CSS選擇器進行樣式設(shè)置。這使得data屬性特別靈活，也非常強大。有了這樣的屬性我們能夠更加有序直觀的進行數(shù)據(jù)預(yù)設(shè)或存儲。下面介紹HTML5 Dataset 存儲的實際應(yīng)用，以及包括jQuery在內(nèi)的四種存取方式。

HTML5 Dataset 存儲的例子

為一個元素分配data屬性存儲數(shù)據(jù)，例如這是一個span元素，它的內(nèi)容是一首音樂的名稱，我們?yōu)槠銱TML標簽里直接預(yù)置這首歌的更多信息，在HTML源碼上看起來可以這樣來寫：

data-date="2013"

data-genre="Electronic"

data-album="Settle (Deluxe)"

data-artist="Disclosure"

data-composer="Howard Lawrence & Guy Lawrence">

Latch (feat. Sam Smith)

這樣，我們就很簡單的為這首歌在span標簽里直接內(nèi)嵌了其專輯、藝術(shù)家和流派信息。

再舉一個例子，比如說一個本地化翻譯的嵌入：

data-en="Peking Duck"

data-available

data-ja="北京ダック"

data-fr="Canard laqué de Pékin"

data-de="Pekingente">

北京烤鴨

這樣一來，在不改變網(wǎng)頁外觀的情況下，我們可以在設(shè)定機器翻譯的同時檢測data-XX，來人工提供更準確精準的翻譯。

其中data-available沒有值，允許空值，例如在這個情況下，它僅代表該食物可以訂購，所以不需要有值。

利用 getAttribute、setAttribute 存取 dataset

作為HTML元素的標簽，dataset的存取也服從getAttribute、setAttribute，而且這兩個方法兼容性也最廣。

例如對于上面的兩個例子，我們可以運行

//get

var album = document.getElementById("music-latch").getAttribute("data-album");

console.log(album);

//set

document.getElementById("food-pkd").setAttribute("data-en","Beijing Stuffed Duck");

這樣就可以以一種更兼容的方式，來存取dataset數(shù)據(jù)。所做出的任何更改，都是可以實時反映到元素data屬性上的。

但是這種方法比較低端，如果遇到多個data-*自定義字段，想要一次全部獲取所有的data屬性并包裝成對象的話，還必須做一個循環(huán)，很麻煩。不過我們還有Dataset API可用。

利用 dataset API 存取 dataset

通過.dataset API，我們可以更方便的獲取元素的所有data字段，并以對象的方式，方便存取和遍歷。例如，對于上面的例子，可以運行

//get

var songd = document.getElementById("music-latch").dataset;

var album = songd.album;

console.log(album);

//set

document.getElementById("food-pkd").dataset.en = "Beijing Stuffed Duck";

//add

document.getElementById("food-pkd").dataset.es = "Pato laqueado a la pekinesa";

這時候我們在訪問data時，就不需要"data-"關(guān)鍵詞了，直接利用.dataset.name就可以訪問到。這比上面的方法更方便。所做出的任何更改，都是可以實時反映到元素data屬性上的。

如果涉及到連字符"-"，可以采取駝峰化的方法來存取：

其中en-us要寫成enUs：

var en = document.getElementById("en").dataset.enUs;

利用?jQuery.attr 方法存取 dataset

jQuery有著出色的兼容性。類似get、setAttribute，jQuery的.attr()方法同樣可以用在這樣的情況下，例如，對于上面的例子，可以運行

window.jQuery && (function($){

//get

var album = $("#music-latch").attr("data-album");

console.log(album);

//set

$("#food-pkd").attr("data-en","Beijing Stuffed Duck");

})(window.jQuery);

這與jQuery.attr運用在其他屬性上時的情況完全一樣，并且所做出的任何更改，都是可以實時反映到元素data屬性上的。

利用?jQuery.data 方法存取 dataset

jQuery從1.4.2版本開始支持$.data()方法來直接訪問data屬性，同時也不需要寫"data-"關(guān)鍵詞了，例如，對于上面的例子，可以運行

window.jQuery && (function($){

//get

var album = $("#music-latch").data("album");

console.log(album);

//set

$("#food-pkd").data("en","Beijing Stuffed Duck");

})(window.jQuery);

這樣的方法也能出色的存取data屬性，但是需要注意，jQuery.data對data數(shù)據(jù)做出的更改，不會反映到HTML元素data屬性上。

也就是說，jQuery現(xiàn)在認為#food-pkd元素的data-en為"Beijing Stuffed Duck"，但是在HTML元素上，其值還是沒有改變，仍為"Peking Duck"：

window.jQuery && (function($){

//set

$("#food-pkd").data("en","Beijing Stuffed Duck");

console.log( $("#food-pkd").data("en") );

// log: "Beijing Stuffed Duck"

})(window.jQuery);

console.log( document.getElementById("food-pkd").dataset.en );

// log: "Peking Duck"

jQuery.data 解析 Dataset 的 JSON 信息

事實上，jQuery還可以很聰明的從data里提取出json信息轉(zhuǎn)換為對象：

data-meta='{"name":"Latch", "album":"Disclosure", "date":"2013"}'>

Latch (feat. Sam Smith)

window.jQuery && (function($){

var jsn = $("#song-jsn").data("meta");

console.log( jsn.album );

// log: "Disclosure"

})(window.jQuery);

這樣，你就可以不必寫一堆 data-album、data-lyrics、data-artist了，你可以直接把所有歌曲信息全部寫到JSON里放到一個單獨的data標簽里！

CSS、jQuery?查找 data 屬性對應(yīng)元素

如果我想要所有專輯名(data-album)為Disclosure的歌曲名顯示為紅色，在CSS選擇器里，我們可以這樣去匹配

.musique[data-album='Disclosure']

{

color:red;

}

這樣，上面的例子中的span文字就會顯示為紅色。

如果我想要所有的現(xiàn)在可訂購的食物在點擊后彈出對話窗，在jQuery里，也可以通過中括號[]用以下方式去輕松匹配

window.jQuery && (function($){

$(".food").filter("[data-available]").each(function(){

$(this).click(function(){

alert("It's Available!");

});

});

})(window.jQuery);

怎么樣，是不是感覺這種自由簡便的存儲方式可以帶來很強大的效果？

HTML5 Dataset 瀏覽器支持情況

HTML5 Data屬性的支持情況在IE上很糟糕：

Internet Explorer: 11+

Chrome: 8+

Firefox: 6+

Opera: 11.1+

Safari: 6+

Android Browser: 4+

因此，如果要考慮兼容性，可以考慮利用 getAttribute、setAttribute存取dataset。

原文：https://blog.netsh.org/posts/html-data-jquery_1812.netsh.html

總結(jié)

以上是生活随笔為你收集整理的html元素data属性设置变量,HTML5 自定义属性 data-* 和 jQuery.data 详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。