如何使用HTML5自定義數(shù)據(jù)屬性

為什么需要自定義數(shù)據(jù)屬性？

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

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

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

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

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

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

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

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

HTML語(yǔ)法

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

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

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

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

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

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

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

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

數(shù)據(jù)屬性與CSS

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

設(shè)計(jì)元素樣式

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

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

效果圖：

創(chuàng)建工具提示

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

你要顯示的信息可以存儲(chǔ)在一個(gè)data-tooltip屬性中。

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

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

span::before {  content: attr(data-tooltip);  // 其余的樣式規(guī)則}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;
}

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

使用JavaScript訪問數(shù)據(jù)屬性

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

使用getAttribute和setAttribute

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

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

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

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

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

使用dataset屬性

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

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

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

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

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

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

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

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

考慮以下的HTML代碼：

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

以下是幾個(gè)例子：

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

你也可以使用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ù)字，布爾值，對(duì)象，數(shù)組和空值等。

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

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

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

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

<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的值返回給我們的一直是舊的結(jié)果。