如何使用HTML5自定义数据属性以及原因

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

很多时候，我们需要存储与不同DOM元素关联的信息。这些信息对于读者而言可能不是必不可少的，但是易于访问将使我们的开发人员的生活更加轻松。

例如，假设您在网页上有一个不同餐厅的列表。在HTML5之前，如果您想存储有关餐厅提供的食物类型或其与访客之间的距离的信息，则应使用HTML class属性。如果您还需要存储餐厅id以查看用户要访问哪个餐厅，该怎么办？

这是基于HTML类属性的方法的一些问题。

• HTML类属性并不意味着存储这样的数据。其主要目的是允许开发人员将样式信息分配给一组元素。
• 每增加一条信息，就需要我们向元素添加一个新类。这使得解析JavaScript中的数据以实际获得我们所需的内容变得更加困难。
• 假设给定的类名称以数字开头。如果您决定以后根据类名称中的数据对元素进行样式设置，则必须转义数字或使用样式表中的属性选择器。

为了摆脱这些问题，HTML5引入了自定义数据属性。名称以开头的元素上的所有属性data-都是数据属性。您还可以使用这些数据属性来设置元素的样式。

接下来，让我们深入了解数据属性的基础知识，并学习如何在CSS和JavaScript中访问它们的值。

HTML语法

如前所述，数据属性的名称始终以开头data-。这是一个例子：

<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>li</span> <span style="color:#669900">data-type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>veg<span style="color:#999999">"</span></span> <span style="color:#669900">data-distance</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>2miles<span style="color:#999999">"</span></span> <span style="color:#669900">data-identifier</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>10318<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
  Salad King
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>li</span><span style="color:#999999">></span></span></code></span>

现在，您可以使用这些数据属性来为访客搜索餐厅并对其进行排序。例如，您现在可以向他们显示特定距离内的所有素食餐厅。

除data-前缀之外，有效的自定义数据属性的名称只能包含字母，数字，连字符（-），点（。），冒号（:)或下划线（_）。它不能包含大写字母。

使用数据属性时，应牢记两件事。

首先，存储在这些属性中的数据应为string类型。可以进行字符串编码的任何内容也可以存储在数据属性中。所有类型转换都需要使用JavaScript进行。

其次，仅当没有其他适当的HTML元素或属性时才应使用数据属性。例如，不适合存储元素的classin data-class属性。

元素可以具有任意数量的数据属性以及所需的任何值。

 

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

数据属性和CSS

您可以在CSS中使用数据属性使用属性选择器来设置元素的样式。您还可以借助该attr()功能（以工具提示或其他方式）将存储在data属性中的信息显示给用户。

造型元素

回到我们的餐厅示例，您可以使用属性选择器为餐厅的背景提供不同的提示，以提示用户餐厅的类型或其与餐厅的距离。这是一个例子：

<span style="color:#000000"><code class="language-css"><span style="color:#669900">li[data-type='veg']</span> <span style="color:#999999">{</span>
  <span style="color:#990055">background</span><span style="color:#999999">:</span> #8BC34A<span style="color:#999999">;</span>
<span style="color:#999999">}</span>

<span style="color:#669900">li[data-type='french']</span> <span style="color:#999999">{</span>
  <span style="color:#990055">background</span><span style="color:#999999">:</span> #3F51B5<span style="color:#999999">;</span>
<span style="color:#999999">}</span></code></span>