如何使用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>

 

 

创建工具提示

您可以使用工具提示向用户显示与元素相关的一些其他信息。

我建议您将这种方法用于快速原型，而不是用于生产网站，这尤其重要，因为不能完全访问纯CSS工具提示。

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

<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>span</span> <span style="color:#669900">data-tooltip</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>A simple explanation<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>Word<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"></</span>span</span><span style="color:#999999">></span></span></code></span>

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

<span style="color:#000000"><code class="language-css"><span style="color:#669900">span::before</span> <span style="color:#999999">{</span>
  <span style="color:#990055">content</span><span style="color:#999999">:</span> <span style="color:#dd4a68">attr</span><span style="color:#999999">(</span>data-tooltip<span style="color:#999999">)</span><span style="color:#999999">;</span>
  // More Style Rules
<span style="color:#999999">}</span>

<span style="color:#669900">span:hover::before</span> <span style="color:#999999">{</span>
  <span style="color:#990055">display</span><span style="color:#999999">:</span> inline-block<span style="color:#999999">;</span>
<span style="color:#999999">}</span></code></span>

 

使用JavaScript访问数据属性

有3种方法可以访问JavaScript中的数据属性。

使用getAttribute和setAttribute

您可以在JavaScript中使用getAttribute()和setAttribute()获取并设置不同数据属性的值。

如果给定属性不存在，则该getAttribute方法将返回null或为空字符串。这是使用这些方法的示例：

<span style="color:#000000"><code class="language-javascript"><span style="color:#0077aa">var</span> restaurant <span style="color:#a67f59">=</span> <span style="color:#ee9900">document</span><span style="color:#999999">.</span><span style="color:#dd4a68">getElementById</span><span style="color:#999999">(</span><span style="color:#669900">"restaurantId"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#0077aa">var</span> ratings <span style="color:#a67f59">=</span> restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">getAttribute</span><span style="color:#999999">(</span><span style="color:#669900">"data-ratings"</span><span style="color:#999999">)</span><span style="color:#999999">;</span></code></span>

您可以使用该setAttribute方法来修改现有属性的值或添加新属性。

 

Report Advertisement

 

<span style="color:#000000"><code class="language-javascript">restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">setAttribute</span><span style="color:#999999">(</span><span style="color:#669900">"data-owner-name"</span><span style="color:#999999">,</span> <span style="color:#669900">"someName"</span><span style="color:#999999">)</span><span style="color:#999999">;</span></code></span>

使用数据集属性

属性的帮助是访问数据属性的一种更简单的方法dataset。此属性返回一个DOMStringMap对象，其中每个自定义数据属性都有一个条目。

使用该dataset属性时，应牢记一些注意事项。

通过三个步骤将自定义数据属性转换为DOMStringMap键：

• 该data-前缀从属性名称中删除
• 名称中删除所有后跟小写字母的连字符，并将其后的字母转换为大写
• 其他字符将保持不变。这意味着任何不带小写字母的连字符也将保持不变。

然后可以使用存储在对象中的camelCase名称作为键（如）来访问属性element.dataset.keyname。

访问属性的另一种方法是使用括号表示法，例如 element.dataset[keyname]

考虑以下HTML：

<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:#669900">data-owner-name</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>someName<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>

这里有一些例子：

<span style="color:#000000"><code class="language-javascript"><span style="color:#0077aa">var</span> restaurant <span style="color:#a67f59">=</span> <span style="color:#ee9900">document</span><span style="color:#999999">.</span><span style="color:#dd4a68">getElementById</span><span style="color:#999999">(</span><span style="color:#669900">"restaurantId"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>

<span style="color:#0077aa">var</span> ratings <span style="color:#a67f59">=</span> restaurant<span style="color:#999999">.</span>dataset<span style="color:#999999">.</span>ratings<span style="color:#999999">;</span>
restaurant<span style="color:#999999">.</span>dataset<span style="color:#999999">.</span>ratings <span style="color:#a67f59">=</span> newRating<span style="color:#999999">;</span>

<span style="color:#0077aa">var</span> owner <span style="color:#a67f59">=</span> restaurant<span style="color:#999999">.</span>dataset<span style="color:#999999">[</span><span style="color:#669900">'ownerName'</span><span style="color:#999999">]</span><span style="color:#999999">;</span>
restaurant<span style="color:#999999">.</span>dataset<span style="color:#999999">[</span><span style="color:#669900">'ownerName'</span><span style="color:#999999">]</span> <span style="color:#a67f59">=</span> <span style="color:#669900">'newOwner'</span><span style="color:#999999">;</span></code></span>

现在，所有主流浏览器都支持此方法，并且您应该比以前的方法更喜欢它来访问自定义数据属性。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

使用jQuery

您还可以使用jQuery data()方法访问元素的数据属性。在jQuery 1.6版之前，您必须使用以下代码访问数据属性：

<span style="color:#000000"><code class="language-javascript"><span style="color:#0077aa">var</span> restaurant <span style="color:#a67f59">=</span> <span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#669900">"#restaurantId"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>

<span style="color:#0077aa">var</span> owner <span style="color:#a67f59">=</span> restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"owner-name"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"owner-name"</span><span style="color:#999999">,</span> <span style="color:#669900">"newName"</span><span style="color:#999999">)</span><span style="color:#999999">;</span></code></span>

从1.6版开始，jQuery开始使用camelCase版本的数据属性。现在，您可以使用以下代码执行相同的操作：

<span style="color:#000000"><code class="language-javascript"><span style="color:#0077aa">var</span> restaurant <span style="color:#a67f59">=</span> <span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#669900">"#restaurantId"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>

<span style="color:#0077aa">var</span> owner <span style="color:#a67f59">=</span> restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"ownerName"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"ownerName"</span><span style="color:#999999">,</span> <span style="color:#669900">"newName"</span><span style="color:#999999">)</span><span style="color:#999999">;</span></code></span>

您应该知道jQuery还会尝试将从data属性获得的字符串内部转换为合适的类型，例如数字，布尔值，对象，数组和null。

<span style="color:#000000"><code class="language-javascript"><span style="color:#0077aa">var</span> restaurant <span style="color:#a67f59">=</span> <span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#669900">"#restaurantId"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#0077aa">var</span> identifier <span style="color:#a67f59">=</span> restaurant<span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"identifier"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>

console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#0077aa">typeof</span> identifier<span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#708090">// number</span></code></span>

如果希望jQuery以字符串形式获取属性值而不尝试将其转换为其他类型，则应使用jQuery的attr()method。

jQuery仅在首次访问数据属性时才检索它们的值。这样就不再访问或更改数据属性。您对这些属性所做的所有更改都是在内部进行的，并且只能在jQuery中访问。

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

<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">id</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>salad<span style="color:#999999">"</span></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-distance属性的值：

<span style="color:#000000"><code class="language-javascript"><span style="color:#0077aa">var</span> distance <span style="color:#a67f59">=</span> <span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#669900">"#salad"</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"distance"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>distance<span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#708090">// "2miles"</span>

<span style="color:#dd4a68">$</span><span style="color:#999999">(</span><span style="color:#669900">"#salad"</span><span style="color:#999999">)</span><span style="color:#999999">.</span><span style="color:#dd4a68">data</span><span style="color:#999999">(</span><span style="color:#669900">"distance"</span><span style="color:#999999">,</span><span style="color:#669900">"1.5miles"</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>distance<span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#708090">// "1.5miles"</span>

<span style="color:#ee9900">document</span><span style="color:#999999">.</span><span style="color:#dd4a68">getElementById</span><span style="color:#999999">(</span><span style="color:#669900">"salad"</span><span style="color:#999999">)</span><span style="color:#999999">.</span>dataset<span style="color:#999999">.</span>distance<span style="color:#999999">;</span> 
<span style="color:#708090">// "2miles"</span></code></span>

如您所见，data-distance使用普通JavaScript（而不是jQuery）访问属性的值将始终为我们提供旧的结果。

结论

在本教程中，我介绍了您需要了解的有关HTML5数据属性的所有重要内容。除了使用属性选择器创建工具提示和样式元素外，您还可以使用数据属性来存储和向用户显示一些其他数据，例如有关未读消息的通知等。