当前位置：文江博客话题详情

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

发布于 2024-10-17 15:58:45 字数 67 浏览 7 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

那些过往 2024-10-24 15:58:45

我假设您引用的是 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-*] 属性会减少数量做同样的事情所需的标记/脚本。

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

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

对于 jQuery 用户，.data() 和 .attr() 可用于访问[data-*]属性，以及我已经写了一份详细的答案，说明您何时想使用其中之一。

I assume you're referencing the HTML5 [data-*] attributes.

The advantage is that you can easily associate some scripting data (still semantic, but not for display) with your elements without having to insert inline javascript all over the place, and it will be valid HTML5. To do the same thing in HTML4 would require specifying a custom namespace, and add some namespaced attributes.

Say you've got a list of items for sale, you may want to store the numeric price without trying to parse a string:

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

If you allow your user to mark a number of different items to buy, you can easily pull out the numeric value to display a running total.

Alternatively, you could have put the numbers in a span with a specific class, find the right span on the right item, and pull out the value that way, but [data-*] attributes reduce the amount of markup/script necessary to do the same thing.

If you don't want to use it, you don't need to. There are many ways of associating data with elements, this is just a new one.

Additionally, the new dataset JavaScript API provides a consistent means of declaratively accessing the values stored in [data-*] attributes.

For jQuery users, .data() and .attr() can be used to access [data-*] attributes, and I have written up a detailed answer on when you would want to use one over the other.

回复收藏 0 原文

杯别 2024-10-24 15:58:45

自定义属性已经被广泛使用，例如这里是来自dojoToolkit的示例< /a>()：

<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 等属性来验证标记。它们还允许您将应用程序特定的数据存储在标签中，而不是在类属性中进行修改。

对 HTML5 Doctor 上的 data-* 属性有一个很好的介绍。

Custom attributes are already widely used, for example here's 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>

This could now be re-written so that the markup validates using attributes like data-dojoType. They also allow you to store application specific data in your tags rather than hacking around in the class attribute.

There's a good introduction to data-* attributes on HTML5 Doctor.

回复收藏 0 原文