HTML5自定义属性-我为什么要使用它们？

我似乎不明白为什么我应该对HTML5允许自定义属性感到高兴我为什么要使用它们？

我假设您引用的是HTML5

[data-*]

属性

其优点是，您可以轻松地将一些脚本数据（仍然是语义的，但不用于显示）与元素关联起来，而无需到处插入内联javascript，而且它将是有效的HTML5。要在HTML4中执行同样的操作，需要指定一个自定义名称空间，并添加一些名称空间属性

假设您有一个待售商品列表，您可能希望存储数字价格，而不尝试解析字符串：

<ul>
  <li data-price="5">Item 1 is only $5 this week!</li>
  <li data-price="1">Sale on Item 2, only $1</li>
  ...
</ul>

项目1本周仅售5美元
第2项仅售1美元
...

如果允许用户标记要购买的多个不同项目，则可以轻松拉出数值以显示运行总数

或者，您可以将数字放在具有特定类的span中，在正确的项上找到正确的span，然后以这种方式提取值，但是

[data-*]

属性减少了执行相同操作所需的标记/脚本数量

如果你不想使用它，你不需要。将数据与元素关联的方法有很多，这只是一种新的方法

此外，新的JavaScript API提供了一种一致的方法，以声明方式访问存储在

[data-*]

属性中的值

---

对于jQuery用户，可用于访问

[data-*]

属性和。

自定义属性已被广泛使用，例如：

Lorem ipsum和周围的人。。。
Lorem ipsum和全方位-秒。。。
Lorem ipsum和全方位-最后。。。

现在可以重新编写它，以便使用

data dojoType

等属性验证标记。它们还允许您将特定于应用程序的数据存储在标记中，而不是在class属性中进行黑客攻击

---

还有。

我找到了数据属性的另一个用途：

---

您可以使用新的HTML5自定义

数据-

属性作为工具提示：

使用

数据-

自定义属性是您的HTML5页面的未来证明，遵守规范的未来浏览器不会使用

数据-[属性]

因此不会与您的自定义属性冲突。

这就是

title

属性的作用。尤其是使用

a

、

abbr

和

dfn

标记。如果使用数据属性工具提示，则无法访问它。

<div style="width: 350px; height: 300px">
    <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
        <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
            Lorem ipsum and all around...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="My second tab">
            Lorem ipsum and all around - second...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
            Lorem ipsum and all around - last...
        </div>
    </div>
</div>