如何使用HTML5自定義數據屬性

為什么需要自定義數據屬性？

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

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

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

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

2. 我們需要為每個追加的信息向元素中添加一個新class，這使得解析JavaScript中的數據得到我們所需要的內容變得更加困難。

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

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

接下來，讓我們深入了解數據屬性的基礎知識、學習如何在CSS和JavaScript中訪問數據屬性的值。

HTML語法

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

<li data-type="veg" data-distance="2miles" data-identifier="10318">
  Salad King</li>

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

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

在使用數據屬性時，你應該記住下面兩個規則：

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

第二：數據屬性應該只在沒有其他合適的HTML元素或屬性時使用。例如，使用data-class屬性存儲元素class屬性的值是不恰當的。

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

數據屬性與CSS

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

設計元素樣式

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

li[data-type='veg'] {  background: #8BC34A;
}li[data-type='french'] {  background: #3F51B5;
}

HTML代碼：

<h3>Restaurants in New York</h3><div class="hint"><span class="french"></span><span>French</span></div><div class="hint"><span class="veg"></span><span>Vegetarian</span></div><div class="hint"><span class="german"></span><span>German</span></div><ul>
  <li data-type="veg" data-distance="2miles" data-identifier="10318">Bloss</li>
  <li data-type="german" data-distance="3miles" data-identifier="10318">Heidelberg</li>
  <li data-type="french" data-distance="1mile" data-identifier="10318">Daniel</li>
  <li data-type="veg" data-distance="4miles" data-identifier="10548">Dirt Candy</li>
  <li data-type="french" data-distance="3miles" data-identifier="10318">La Grenouille</li>
  <li data-type="french" data-distance="1mile" data-identifier="10318">Balthazar</li>
  <li data-type="veg" data-distance="2miles" data-identifier="12315">Angelica Kitchen</li>
  <li data-type="german" data-distance="1mile" data-identifier="10318">Blaue Gans</li>
  <li data-type="german" data-distance="2miles" data-identifier="12315">Reichenbach Hall</li></ul>

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;
}

效果圖：

創建工具提示

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

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

<span data-tooltip="A simple explanation">Word</span>

然后，你可以使用::before偽元素將數據呈現給用戶。

span::before {  content: attr(data-tooltip);  // 其余的樣式規則}span:hover::before {  display: inline-block;
}

HTML代碼：

<p>The gray wolf, also known as the <span class="tooltip" data-tooltip="some more information"><span class="tooltip-info">some more information </span>timber wolf</span> or western wolf, is a canine native to the wilderness and remote areas of Eurasia and <span class="tooltip" data-tooltip="some more information"><span class="tooltip-info">some more information  </span>North America</span>. 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 <span class="tooltip" data-tooltip="some more information"><span class="tooltip-info">some more information</span>Canis species</span> by its larger size and less pointed features, particularly on the ears and muzzle.</p>

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;
}

效果圖（鼠標移入淡紅色的區域會出黑色背景的提示）：

使用JavaScript訪問數據屬性

在JavaScript中有三種方式訪問數據屬性。

使用getAttribute和setAttribute

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

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

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

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

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

使用dataset屬性

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

使用 dataset屬性時，你應該記住下面這些步驟：

將自定義數據屬性轉換為DOMStringMap的鍵值需要三個步驟：

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

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

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

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

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

考慮以下的HTML代碼：

<li data-type="veg" data-distance="2miles" data-identifier="10318" data-owner-name="someName">
  Salad King
</li>

以下是幾個例子：

var restaurant = document.getElementById("restaurantId");var ratings = restaurant.dataset.ratings;
restaurant.dataset.ratings = newRating;var owner = restaurant.dataset['ownerName'];
restaurant.dataset['ownerName'] = 'newOwner';

現在所有的主流瀏覽器都支持這種方法。相比之前訪問自定義數據屬性的方法，你應該更喜歡這種方法。

使用 jQuery

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

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

從版本1.6開始，jQuery使用駝峰命名法版本的數據屬性。現在，你可以使用以下代碼來做同樣的事情：

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

你應該知道，jQuery內部還試圖將從數據屬性中獲取的字符串轉換成合適的類型，如數字，布爾值，對象，數組和空值等。

var restaurant = $("#restaurantId");var identifier = restaurant.data("identifier");console.log(typeof identifier);  
// number

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

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

假設你正在操作以下列表項的數據屬性：

<li id="salad" data-type="veg" data-distance="2miles" data-identifier="10318">
  Salad King</li>

你可以使用以下代碼更改其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的值返回給我們的一直是舊的結果。