如何使用HTML5自定义数据属性

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

效果图：

创建工具提示

你可以使用工具提示向用户显示一些与元素相关的附加信息。但是因为纯CSS的工具提示不能完全使用，所以我建议你在简单的模型上使用这种方法而不是在一个产品型的网站上。

你要显示的信息可以存储在一个data-tooltip属性中。

Word

然后，你可以使用::before伪元素将数据呈现给用户。

span::before {  content: attr(data-tooltip);  // 其余的样式规则}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;
}

效果图（鼠标移入淡红色的区域会出黑色背景的提示）：

使用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代码：

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

现在所有的主流浏览器都支持这种方法。相比之前访问自定义数据属性的方法，你应该更喜欢这种方法。

使用 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访问。

假设你正在操作以下列表项的数据属性：

  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的值返回给我们的一直是旧的结果。