Salad King

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

Restaurants in New York
French

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

效果圖：

創(chuàng)建工具提示

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

你要顯示的信息可以存儲(chǔ)在一個(gè)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ū)域會(huì)出黑色背景的提示）：

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

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

使用getAttribute和setAttribute

你可以使用JavaScript中的getAttribute()和setAttribute()來(lái)獲取和設(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屬性

訪問(wèn)數(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. 將任何后跟小寫(xiě)字母的連字符從名稱(chēng)中刪除，并將其后面的字母轉(zhuǎn)換為大寫(xiě)字母（即駝峰命名法——譯者注）

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

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

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

考慮以下的HTML代碼：

  Salad King

以下是幾個(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)在所有的主流瀏覽器都支持這種方法。相比之前訪問(wèn)自定義數(shù)據(jù)屬性的方法，你應(yīng)該更喜歡這種方法。

使用 jQuery

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

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

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

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

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

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

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

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

假設(shè)你正在操作以下列表項(xiàng)的數(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é)果。