摘要：在之前，你必須使用以下代碼來訪問數(shù)據(jù)屬性從版本開始，使用駝峰命名法版本的數(shù)據(jù)屬性。

在本文中，我將向你介紹如何使用HTML5自定義數(shù)據(jù)屬性。我還將向你介紹一些開發(fā)人員在工作中經(jīng)常使用的優(yōu)秀實例。

很多時候我們需要存儲一些與不同DOM元素相關(guān)聯(lián)的信息。這些信息對于讀者來說可能是不需要的，但是可以輕松的訪問這些信息將會給我們開發(fā)者的工作帶來極大的便利。

例如，假設(shè)你有一份某個餐飲類網(wǎng)站上所有餐館的名單。在HTML5之前，如果你想存儲餐館提供的食物種類或餐館與用戶之間的距離等信息，那么你將使用HTML的class屬性。但是如果你還需要存儲餐館的id以便查看用戶想要訪問的特定餐廳該怎么辦？

以下是基于HTMLclass屬性的方法存在的一些問題：

HTMLclass屬性不是用來存儲這樣的數(shù)據(jù)的，其主要目的是允許開發(fā)人員給一組元素添加樣式信息。

我們需要為每個追加的信息向元素中添加一個新class，這使得解析JavaScript中的數(shù)據(jù)得到我們所需要的內(nèi)容變得更加困難。

假設(shè)給定的類名以數(shù)字開頭。如果你決定稍后根據(jù)類名來設(shè)計元素的樣式，那么你在樣式表中將不得不回避數(shù)字或者使用屬性選擇器。

為了解決這些問題，HTML5引入了自定義數(shù)據(jù)屬性。一個元素上屬性名以data-開頭的屬性都是數(shù)據(jù)屬性。你也可以使用這些數(shù)據(jù)屬性來給元素設(shè)計樣式。

接下來，讓我們深入了解數(shù)據(jù)屬性的基礎(chǔ)知識、學(xué)習(xí)如何在CSS和JavaScript中訪問數(shù)據(jù)屬性的值。

如上所述，data屬性的名稱始終以data-開頭。以下是一個例子：

  Salad King

你現(xiàn)在可以使用這些數(shù)據(jù)屬性為你的用戶搜索和排序餐廳。例如，你現(xiàn)在可以向他們展現(xiàn)在一定距離內(nèi)的所有素食餐廳。

除了data-前綴之外，有效的自定義數(shù)據(jù)屬性的名稱必須只能包含字母、數(shù)字、連字符（ - ）、點（。）、冒號（:）或下劃線（_），不能包含大寫字母。

在使用數(shù)據(jù)屬性時，你應(yīng)該記住下面兩個規(guī)則：

第一：存儲在這些屬性中的數(shù)據(jù)應(yīng)該是字符串類型。任何可以被編碼為字符串類型的東西也可以存儲在數(shù)據(jù)屬性中。所有的類型轉(zhuǎn)換都需要使用JavaScript完成。

第二：數(shù)據(jù)屬性應(yīng)該只在沒有其他合適的HTML元素或?qū)傩詴r使用。例如，使用data-class屬性存儲元素class屬性的值是不恰當(dāng)?shù)摹?

一個元素可以具有任意數(shù)量的數(shù)據(jù)屬性，這些數(shù)據(jù)屬性也可以具有任何所需要的值。

你可以根據(jù)數(shù)據(jù)屬性使用CSS中的屬性選擇器來為元素設(shè)計樣式。你還可以借助attr()函數(shù)將數(shù)據(jù)屬性中存儲的信息顯示給用戶（以工具提示或其他方式）。

現(xiàn)在回到我們餐廳的例子，你可以使用數(shù)據(jù)屬性向用戶提供關(guān)于餐廳類型或者他們與餐廳之間的距離等信息，或者為餐廳設(shè)計不同的背景顏色。以下是一個例子：

li[data-type="veg"] {
  background: #8BC34A;
}

li[data-type="french"] {
  background: #3F51B5;
}

HTML代碼：

Restaurants in New York
French
Vegetarian
German

  
Bloss
  
Heidelberg
  
Daniel
  
Dirt Candy
  
La Grenouille
  
Balthazar
  
Angelica Kitchen
  
Blaue Gans
  
Reichenbach Hall

CSS代碼：

html {
    font-family: "Lato";
    margin: 20px auto;
    max-width: 600px;
    font-size: 1.25em;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    padding: 5px 10px;
    margin: 5px 0;
    color: white;
    border-radius: 5px;
}

.hint {
    margin-right: 30px;
    display: inline-block;
}

span.french, span.veg, span.german {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    float: left;
    margin-top: 5px;
    margin-right: 5px;
}

span.french {
    background: #3F51B5;
}

span.veg {
    background: #8BC34A;
}

span.german {
    background: #bb6666;
}

li[data-type="veg"] {
    background: #8BC34A;
}

li[data-type="french"] {
    background: #3F51B5;
}

li[data-type="german"] {
    background: #bb6666;
}

效果圖：

你可以使用工具提示向用戶顯示一些與元素相關(guān)的附加信息。但是因為純CSS的工具提示不能完全使用，所以我建議你在簡單的模型上使用這種方法而不是在一個產(chǎn)品型的網(wǎng)站上。

你要顯示的信息可以存儲在一個data-tooltip屬性中。

Word

然后，你可以使用::before偽元素將數(shù)據(jù)呈現(xiàn)給用戶。

span::before {
  content: attr(data-tooltip);
  // 其余的樣式規(guī)則
}

span:hover::before {
  display: inline-block;
}

HTML代碼：

The gray wolf, also known as the some more information timber wolf or western wolf, is a canine native to the wilderness and remote areas of Eurasia and some more information  North America. It is the largest extant member of its family, with males averaging 43–45 kg (95–99 lb), and females 36–38.5 kg (79–85 lb). Like the red wolf, it is distinguished from other some more informationCanis species by its larger size and less pointed features, particularly on the ears and muzzle.

CSS代碼：

html {  
    font-family: "Lato"; 
    margin: 20px auto;  
    line-height: 1.5;  
    max-width: 600px;  
    font-size: 1.25em;
}

span.tooltip {  
    padding: 0px 5px;  
    position: relative;  
    background: #FFBB99;  
    cursor: pointer;
}

.tooltip-info { 
    position: absolute;  
    top: -9999px;  
    left: -9999px;
}

span.tooltip::before {  
    content: attr(data-tooltip);  
    position: absolute; 
    top: 1.5em; 
    font-size: 0.9em; 
    padding: 1px 5px; 
    display: none;  
    color: white;  
    background: rgba(0, 0, 0, 0.75);                border-radius: 4px; 
    transition: opacity 0.1s ease-out; 
    z-index: 99;  
    text-align: left;
}

span:hover::before {  
    display: inline-block;
}

效果圖（鼠標(biāo)移入淡紅色的區(qū)域會出黑色背景的提示）：

在JavaScript中有三種方式訪問數(shù)據(jù)屬性。

你可以使用JavaScript中的getAttribute()和setAttribute()來獲取和設(shè)置不同數(shù)據(jù)屬性的值。

如果給定的屬性不存在，該getAttribute方法將返回null或一個空字符串。以下是使用這些方法的示例：

var restaurant = document.getElementById("restaurantId");
var ratings = restaurant.getAttribute("data-ratings");

你可以使用該setAttribute方法修改現(xiàn)有屬性的值或添加新屬性。

restaurant.setAttribute("data-owner-name", "someName");

訪問數(shù)據(jù)屬性的一種更為簡單的方法是借助dataset屬性。此屬性返回一個DOMStringMap對象，此對象擁有一個包含所有自定義數(shù)據(jù)屬性的目錄。

使用 dataset屬性時，你應(yīng)該記住下面這些步驟：

將自定義數(shù)據(jù)屬性轉(zhuǎn)換為DOMStringMap的鍵值需要三個步驟：

將該data-前綴從屬性名中刪除

將任何后跟小寫字母的連字符從名稱中刪除，并將其后面的字母轉(zhuǎn)換為大寫字母（即駝峰命名法——譯者注）

其他字符保持不變。這意味著任何沒有被小寫字母跟著的連字符也將保持不變。

然后可以使用存儲在對象中按照駝峰命名法命名的名稱作為鍵來訪問屬性，如element.dataset.keyname。

訪問屬性的另一種方法是使用括號符號，如 element.dataset[keyname]。

考慮以下的HTML代碼：

  Salad King

以下是幾個例子：

var restaurant = document.getElementById("restaurantId");

var ratings = restaurant.dataset.ratings;
restaurant.dataset.ratings = newRating;

var owner = restaurant.dataset["ownerName"];
restaurant.dataset["ownerName"] = "newOwner";

現(xiàn)在所有的主流瀏覽器都支持這種方法。相比之前訪問自定義數(shù)據(jù)屬性的方法，你應(yīng)該更喜歡這種方法。

你也可以使用jQuery的data()方法來訪問元素的數(shù)據(jù)屬性。在jQuery1.6之前，你必須使用以下代碼來訪問數(shù)據(jù)屬性：

var restaurant = $("#restaurantId");

var owner = restaurant.data("owner-name");
restaurant.data("owner-name", "newName");

從版本1.6開始，jQuery使用駝峰命名法版本的數(shù)據(jù)屬性?，F(xiàn)在，你可以使用以下代碼來做同樣的事情：

var restaurant = $("#restaurantId");

var owner = restaurant.data("ownerName");
restaurant.data("ownerName", "newName");

你應(yīng)該知道，jQuery內(nèi)部還試圖將從數(shù)據(jù)屬性中獲取的字符串轉(zhuǎn)換成合適的類型，如數(shù)字，布爾值，對象，數(shù)組和空值等。

var restaurant = $("#restaurantId");
var identifier = restaurant.data("identifier");

console.log(typeof identifier);  
// number

如果你希望jQuery以字符串的形式獲取屬性的值，而不用嘗試將其轉(zhuǎn)換為其他類型，則應(yīng)該使用jQuery的attr()方法。

jQuery僅在第一次訪問時檢索數(shù)據(jù)屬性的值。以后不再訪問或更改數(shù)據(jù)屬性的值。你對這些屬性所做的所有更改都會在內(nèi)部進行，并且只能使用jQuery訪問。

假設(shè)你正在操作以下列表項的數(shù)據(jù)屬性：

  Salad King

你可以使用以下代碼更改其data-distance屬性的值：

var distance = $("#salad").data("distance");
console.log(distance); 
// "2miles"

$("#salad").data("distance","1.5miles");
console.log(distance);  
// "1.5miles"

document.getElementById("salad").dataset.distance;  
// "2miles"

你可以看到，使用普通的JavaScript（不是jQuery）獲取屬性data-distance的值返回給我們的一直是舊的結(jié)果。

在本教程中，我介紹了HTML5數(shù)據(jù)屬性中你需要了解的所有重要的知識。除了使用屬性選擇器創(chuàng)建工具提示和樣式元素之外，還可以使用數(shù)據(jù)屬性來存儲和顯示用戶一些其他數(shù)據(jù)，例如一個未讀消息的通知等等。

如果你對數(shù)據(jù)屬性有任何其他問題，請在評論中告訴我。

原文鏈接：https://www.sitepoint.com/how...