Question

我似乎无法理解为什么我应该对HTML5允许自定义属性感到满意？ 我为什么要使用它们？

Answer 1

我假设您引用了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>

如果您允许用户标记要购买的多个不同商品，则可以轻松提取数值以显示运行总计。

或者，您可以将数字放在具有特定类的范围内，在正确的项目上找到正确的范围，然后以该方式提取值，但[data-*]属性会减少标记/脚本的数量必须做同样的事情。

如果您不想使用它，则不需要。有许多方法可以将数据与元素相关联，这只是一个新方法。

此外，新的dataset JavaScript API提供了一种以声明方式访问存储在[data-*]属性中的值的一致方法。

对于jQuery用户，.data()和.attr()可用于访问[data-*]属性和I have written up a detailed answer on when you would want to use one over the other。

Answer 2

自定义属性已被广泛使用，例如此处为an example from dojoToolkit（）：

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

现在可以重写这个，以便标记使用data-dojoType等属性进行验证。它们还允许您将特定于应用程序的数据存储在标记中，而不是在类属性中进行黑客攻击。

有a good introduction to data-* attributes on HTML5 Doctor。

Answer 3

使用data-自定义属性可以保护您的 html5 页面，未来符合规范的浏览器不会使用data-[attribute]，因此不会与您的自定义属性冲突。< / p>

Answer 4

我发现了数据属性的另一个用途：

您可以将新的HTML5自定义data-属性用于工具提示：Semantic Tooltips With Pure CSS3 and HTML5.

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

4 个答案: