20 lines
1.5 KiB
Plaintext
20 lines
1.5 KiB
Plaintext
---
|
||
title: data- 属性有什么用？
|
||
---
|
||
|
||
在 JavaScript 框架流行之前，开发人员使用 `data-` 属性在 DOM 本身中存储额外的数据，而无需其他技巧，例如非标准属性、DOM 上的额外属性。它旨在存储页面或应用程序专用的自定义数据，当没有更合适的属性或元素时。
|
||
|
||
`data-` 属性的另一个常见用例是存储第三方库或框架使用的信息。例如，Bootstrap 库使用数据属性使 `<button>` 在页面上的其他位置触发模态操作 ([示例](https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes))。
|
||
|
||
```html
|
||
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">
|
||
Launch modal
|
||
</button>
|
||
...
|
||
<div class="modal fade" id="myModal">Modal contents</div>
|
||
```
|
||
|
||
如今，通常不鼓励使用 `data-` 属性。原因之一是用户可以通过在浏览器中使用“检查元素”来轻松修改数据属性。数据模型最好存储在 JavaScript 环境中，并通过虚拟 DOM 协调或双向数据绑定（可能通过库或框架）使它们与 DOM 保持同步。
|
||
|
||
但是，数据属性的一个完全有效的用途是为 **端到端** 测试框架（例如 Playwright、Puppeteer、Selenium）添加一个标识符，而无需仅为主要用于其他目的的测试添加类或 ID 属性。该元素需要一种被选择的方式，而类似 `data-test-id="my-element"` 的方式是一种有效的方式，可以在不使语义标记复杂化的前提下实现。
|