JavaScript 中的自定义属性394

## 简介
JavaScript 中的自定义属性允许开发者为 DOM 元素添加额外的元数据，这些元数据不会影响元素的渲染或行为。它们本质上是键值对，用于存储与元素相关的信息，而不会直接通过元素的 HTML 或 CSS 来访问。
## 创建自定义属性
要创建自定义属性，可以使用以下语法：
```javascript
('data-my-attribute', 'my-value');
```
其中：
* `element` 是要添加属性的 DOM 元素。
* `'data-my-attribute'` 是自定义属性的名称。
* `'my-value'` 是自定义属性的值。
自定义属性的名称必须以 `data-` 前缀开头，以将其与标准属性区分开来。
## 访问自定义属性
要访问自定义属性，可以使用以下语法：
```javascript
('data-my-attribute');
```
将返回自定义属性的值。
## 用途
自定义属性有各种用途，包括：
* 存储元素特定的配置： 可以在自定义属性中存储与元素行为或外观相关的配置。
* 保存应用程序状态： 可以在自定义属性中保存应用程序的状态，例如用户偏好或表单数据。
* 启用样式化： 自定义属性可以用于在 CSS 中动态设置元素样式，从而实现更灵活和可定制的样式。
* 创建可重用组件： 可以使用自定义属性来创建可重用的组件，其行为和外观可以通过设置属性来修改。
## 设置默认值
可以使用 `dataset` 属性设置自定义属性的默认值。`dataset` 是一个特殊的对象，其键与自定义属性的名称相对应，值与属性的值相对应。例如：
```javascript
= 'my-default-value';
```
## 移除自定义属性
要移除自定义属性，可以使用以下语法：
```javascript
('data-my-attribute');
```
## MutationObserver 和自定义属性
MutationObserver 可以用于监听自定义属性的变化。当自定义属性的值发生变化时，将触发 MutationObserver 的 `attributes` 回调函数。
```javascript
const observer = new MutationObserver((mutations) => {
((mutation) => {
if ( === 'data-my-attribute') {
// 属性值已更改
}
});
});
(element, {
attributes: true,
attributeFilter: ['data-my-attribute']
});
```
## 浏览器支持
所有主要浏览器都支持自定义属性，包括：
* Chrome
* Firefox
* Safari
* Edge
## 结论
JavaScript 中的自定义属性是一种强大的工具，可用于存储与 DOM 元素相关的信息，而不会影响其呈现或行为。它们有各种用途，包括存储元素特定的配置、保存应用程序状态、启用样式化和创建可重用组件。

2025-02-06

---

上一篇：JavaScript U3D: 在 Web 中构建 3D 体验

下一篇：面向对象编程（OOP）在 JavaScript 中的应用