一尘不染

为什么我在自定义属性前添加“ data-”?

html

因此,我使用的所有自定义数据属性都应以“ 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>

如果我不理会这会发生什么不好的事情?即:

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

我想一件坏事是我的自定义属性可能与具有特殊含义(例如name)的HTML属性发生冲突,但是除此之外,仅编写“ example_text”而不是“data-example_text”是否有问题?(它不会验证,但是谁在乎呢?)


阅读 299

收藏
2020-05-10

共1个答案

一尘不染

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

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

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

  3. 它们清楚地表明哪些属性是自定义属性,哪些属性是标准化属性。这不仅允许验证者允许任何带有data- *的属性,同时仍对其他属性执行有用的错误检查(例如,捕获输入错误),从而帮助验证者,而且还有助于使源代码的这一方面对那些阅读它的人(包括人们)更清晰在原作者之后可能会在网站上工作的人。

2020-05-10