为什么我应该在属性中使用“data-”或在标签中使用破折号？

Question

根据许多最新的 HTML 规范，当我们使用自定义属性（意味着规范中未定义的任何属性）时，我们应该在它们前面加上
```
data-
```
。但是，我认为没有理由必须这样做（显然，除非您需要完全有效的 HTML）。几乎所有当前的浏览器都正确地忽略自定义属性，这意味着除了与其他代码中的同名属性之外没有冲突，并且我们甚至可以使用自定义前缀或类似的东西来忽略这一点（如AngularJS指令页面上所建议的）。如果有的话，还有哪些其他好处？这个问题已经被问过之前，至少两次，但都已经很老了。
我忘记在哪里读到的，但一些指南说自定义 HTML 标签需要破折号，并且单个单词标签无效。首先，为什么？其次，我们应该这样做吗？为什么（除了有效之外）？下划线或者驼峰命名法等会有问题吗？此外，与现有元素的冲突不应该成为问题，如果像使用
```
data
```
属性一样，为它们添加前缀或后缀等。请再次参阅 Angular 指令页面。

我确信所有这些问题以前都被问过，但我将它们合并为一个。这是个好主意吗（快点，有人在 Meta 上问）？

Answer 1

data-*

属性有两个优点：

这是一种约定，意味着其他程序员会很快理解它是一个自定义属性。
您免费获得 DOM Javascript API：HTMLElement.dataset。如果您使用 jQuery，它会利用它来填充您使用
```
.data()
```
找到的键和值。

自定义元素名称中使用

的原因是两个基本原因：

这是 HTML 解析器知道它是自定义元素而不是标准元素的快速方法。
如果您为 DOM 元素注册自定义 Javascript 原型，则不会遇到添加同名新标准元素的问题，这会导致冲突。

您应该使用自己的自定义元素名称吗？现在它还很新，所以不要指望它会得到完全支持。假设它确实有效。您必须平衡额外复杂性的问题和好处。如果你可以不用类名，那么就使用类名。但是，如果您需要一个带有自定义 Javascript DOM 原型的全新元素，那么您可能可以有效地使用它。

Answer 2

<!-- Run below example to understand html 'data-*' attribute. 
    Click on the 'list items' in the browser. -->
<!-- https://www.w3schools.com/tags/att_global_data.asp -->

<!DOCTYPE html>
<html>
<head>
    <script>
        function showDetails(animal) {
             let animalType = animal.getAttribute("data-animal- 
             type");
             alert("The " + animal.innerHTML + " is a " + 
             animalType + ".");
        }
    </script>
</head>

<body>
    <h1>Species</h1>
    <p>Click on a species to see what type it is:</p>

    <ul>
        <li onclick="showDetails(this)" id="owl" data-animal- 
           type="bird">Owl</li>
        <li onclick="showDetails(this)" id="salmon" data- 
           animal-type="fish">Salmon</li>  
        <li onclick="showDetails(this)" id="tarantula" data- 
           animal-type="spider">Tarantula</li>  
    </ul>

    </body>
</html>

为什么我应该在属性中使用“data-”或在标签中使用破折号？

问题描述投票：0回答：2

2个回答

最新问题

为什么我应该在属性中使用“data-”或在标签中使用破折号？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2