在 HTML 数据属性上存储自定义数据的目的是什么？
我一直试图理解“为什么 HTML 标记中可能需要自定义数据？为什么它存储在 data-* 属性中？”。主要是在没有数据库、没有API的情况下使用吗？还是说无关紧要？
我知道数据属性可用于存储 class、id 中不能使用的信息，并且可以在 CSS 或 JS 中使用，但情况可能会怎样？将其存储在 HTML 标记中？我试图找出使用自定义数据和数据属性的最佳正确方法。
I've been trying to understand "Why do custom data might be needed in an HTML tag? And why does it stored in data-* attributes?". Is it used mostly when there is no database, no API? Or is it irrelevant?.
I understand that data attributes can be used for storing the information that can't be in class, id and can be used in CSS or JS but what could be the case for storing it in an HTML tag? I'm trying to figure out the best possible right way to use custom data and data attributes.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我当前使用的一个用例是我在 React 中创建了一个组件，并使用伪元素从数据属性中获取数据，即。 data-title 值将由 CSS 在 content: attr(data-title) 中获取，所以我传递给组件的任何值都直接通过 css 显示，而且还有很多用例，例如您需要一些值而不是传递单击功能上的整个对象，您只需添加单击事件，它就会从数据属性中获取值。
我现在可以想到这两个用例。
----------- 更新 ---------------
data-* 属性允许我们存储关于标准、语义 HTML 元素的额外信息，而无需其他 hack，例如非标准属性或 DOM 上的额外属性，黑客可能会使您的 HTML 在许多情况下无效或产生未知的错误。我们使用的常见属性是 class、id 等，对于自定义属性，您可以使用 data-*。引入数据属性的主要动机是允许我们在标准的语义 HTML 元素上存储额外的信息，而无需其他技巧，例如非标准属性或 DOM 上的额外属性。因此，当您问什么更好地接近您时，您所能想到的就是有多种方法可以实现同一目标，并且开发人员采取的方法是主观的。
One use case I currently used was I created a component in react and used pseudo elements to take data from data attribute ie. data-title value will be taken by CSS in content: attr(data-title) so what ever value I am passing to component shows directly via css and also there are so many use cases for eg you need some value to be instead of passing whole object on click function you just add click event and it will take values from data attributes instead.
These two use cases I can think of rite now.
----------- UPDATE ---------------
data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM, hacks can make your HTML invalid in many cases or create unknown bugs. Common attributes that we use are class, id etc and for custom attributes you can use data-*. The main motivation behind introduction of data attribute is to allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM. So when you ask what's better approach you, all you can think about is there are multiple ways to achieve same thing and it's subjective to developer to take approch.