html自定义调控

为什么需要自定义数据属性？

很多时候我们需要存储一些与不同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代码：

<h2>Restaurants in New York</h2>
<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; }