为什么我应该在我的自定义属性前面加上“data-"?

问题描述

所以我使用的任何自定义数据属性都应该以data-"开头:

So any custom data attribute that I use should start with "data-":

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

如果我忽略这一点，会有什么不好的事情发生吗?即:

Will anything bad happen if I just ignore this? I.e.:

<li class="user" name="John Resig" city="Boston"
     lang="js" food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

我想一件坏事是我的自定义属性可能与具有特殊含义的 HTML 属性冲突(例如，name)，但除此之外，只写example_text"是否有问题数据示例文本"?(它不会验证，但谁在乎呢?)

I guess one bad thing is that my custom attributes could conflict with HTML attributes with special meanings (e.g., name), but aside from this, is there a problem with just writing "example_text" instead of "data-example_text"? (It won't validate, but who cares?)

推荐答案

保持自定义属性以 data-* 为前缀有几个好处.

There are several benefit for keeping custom attributes prefixed with data-*.

1. 它保证在以后的版本中不会与 HTML 的扩展发生任何冲突.这是一个在某种程度上已经在 HTML5 中引入的一些新属性遇到的问题，其中现有站点使用具有相同名称的属性并期望不同且不兼容的自定义行为.(例如，已知 input 元素上的 required 属性在过去曾在一些流行网站上发生过冲突)

1. It guarantees there will not be any clashes with extensions to HTML in future editions. This is a problem that has been encountered to some degree already with some of the new attributes introduced in HTML5, where existing sites were using attributes with the same name and expecting different and incompatible, custom behaviour. (e.g. the required attribute on input elements is known to have had some clashes on some popular websites in the past)

有一个方便的 DOM API，HTMLElement.dataset，用于从脚本访问这些属性.现在大多数浏览器都支持.

There is a convenient DOM API, HTMLElement.dataset, for accessing these attributes from scripts. It is now supported in most browsers.

它们清楚地表明哪些属性是自定义属性，哪些是标准化属性.这不仅通过允许验证器允许具有 data-* 的任何属性同时仍然对其他属性执行有用的错误检查(例如捕获拼写错误)来帮助验证器，它还有助于使源代码的这一方面对阅读它的人来说更加清晰，包括人们谁可以在原作者之后在网站上工作.

They provide a clear indication of which attributes are custom attributes, and which ones are standardised attributes. This not only helps validators by allowing them to permit any attribute with data-* while still performing useful error checking for other attributes (e.g. to catch typos), it also helps make this aspect of the source code clearer to those reading it, including people who may work on a website after the original author.

这篇关于为什么我应该在我的自定义属性前面加上“data-"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！