这类属性不会影响页面布局，但能通过 JavaScript 轻松读写，实现数据与元素的强绑定。

2. 命名规则与规范

必须以 data- 开头，避免与保留属性（如 id, class）冲突推荐使用小写字母和连字符（如 data-user-role）复杂数据建议存储为 JSON 字符串（如 data-cart-items='{"id":1,"count":3}'）

二、操作自定义属性

1. 传统方法（兼容旧浏览器）

通过 getAttribute() 和 setAttribute() 、removeAttribute()操作：

const btn = document.querySelector('button');

btn.setAttribute('data-action', 'edit'); // 设置属性

const action = btn.getAttribute('data-action'); // 读取属性

btn.removeAttribute('data-action'); // 移除属性

2.现代方法(推荐)

使用 dataset 对象（自动处理命名转换）

命名规则：HTML中写 data-user-id，JS中通过 dataset.userId 访问

const element = document.querySelector('#target');

// 写入属性

// data-last-name 在JS中转换为 lastName

element.dataset.lastName = 'Doe';

// 读取属性（自动转换驼峰命名）

// data-user-id 在JS中转换为 userId

console.log(element.dataset.userId);

// 删除属性

// data-first-name 在JS中转换为 firstName

delete userProfile.dataset.firstName;

三、实战应用场景

1. 动态数据绑定（电商案例）

场景：电商商品卡片

在这个例子中，我们创建了一个电商商品卡片的HTML结构，并使用JavaScript来实现动态数据绑定和购物车功能的交互。

// 遍历所有具有 'add-to-cart' 类的按钮

document.querySelectorAll('.add-to-cart').forEach(btn => {

// 为每个按钮添加点击事件监听器

btn.addEventListener('click', () => {

// 获取最近的具有 'product-card' 类的祖先元素

const card = btn.closest('.product-card');

// 从数据集中读取商品ID

const productId = card.dataset.productId;

// 从数据集中读取价格并转换为浮点数

const price = parseFloat(card.dataset.price);

// 检查库存是否大于0

if(parseInt(card.dataset.stock) > 0) {

// 调用 addToCart 函数，将商品信息作为参数传递

addToCart({ id: productId, price });

// 实时更新库存

card.dataset.stock--;

}

});

});

2. 状态联动控制

场景：多步骤表单向导

在这个例子中，我们创建了一个多步骤表单向导的交互逻辑。用户在完成每个步骤的表单验证后，可以移动到下一步。通过这种方式，我们可以创建一个用户友好的多步骤表单向导，确保用户在完成每个步骤的必要操作后才能继续前进。

// 验证当前步骤的函数

function validateStep(stepElement) {

// 这里是验证逻辑，根据实际情况实现

const isValid = /* 验证逻辑 */;

// 将验证结果存储在数据集中

stepElement.dataset.valid = isValid;

// 控制导航按钮状态

// 如果验证不通过，则禁用下一步按钮

document.querySelector('#nextBtn').disabled = !isValid;

}

// 步骤切换动画的函数

function switchStep(newStep) {

// 获取当前活动的步骤元素

const currentStep = document.querySelector('[data-step].active');

// 将当前步骤的 'active' 数据属性设置为 'false'

currentStep.dataset.active = "false";

// 获取新步骤的元素

const newStepElement = document.querySelector(`[data-step="${newStep}"]`);

// 将新步骤的 'active' 数据属性设置为 'true'

newStepElement.dataset.active = "true";

}

3. 高级表单验证

场景：动态规则绑定

在这个例子中，我们创建了一个密码输入框，它具有动态验证规则。这些规则被绑定到输入框的数据属性中，并通过JavaScript函数进行验证。当用户输入密码时，会根据这些规则进行检查，如果输入不符合规则，则会增加尝试次数，并在达到最大尝试次数后禁用输入框。

type="password"

data-validation-rules='{

"minLength": 8,

"requireSpecialChar": true,

"maxAttempts": 3

}'

data-attempts="0"

>

// 验证当前步骤的函数

function validatePassword(input) {

// 从数据集中解析验证规则

const rules = JSON.parse(input.dataset.validationRules);

let isValid = true;

// 检查密码长度是否小于最小长度

if(input.value.length < rules.minLength) isValid = false;

// 检查是否需要特殊字符，并且密码中是否包含特殊字符

if(rules.requireSpecialChar && !/[!@#$%^&*]/.test(input.value)) isValid = false;

// 如果验证不通过

if(!isValid) {

// 增加尝试次数

input.dataset.attempts = parseInt(input.dataset.attempts) + 1;

// 如果尝试次数达到最大次数，则禁用输入框

if(input.dataset.attempts >= rules.maxAttempts) {

input.disabled = true;

}

}

// 返回验证结果

return isValid;

}

4.性能优化策略

在这个例子中，我们使用了 MutationObserver API 来监听 DOM 元素属性的变化。当特定的属性（例如 data-status）发生变化时，我们会执行一个更新用户界面的函数。这种方法可以有效地减少不必要的 DOM 操作，从而提高性能。

// 创建一个 MutationObserver 实例，用于监听 DOM 变化

const observer = new MutationObserver(entries => {

entries.forEach(entry => {

if(entry.attributeName === 'data-status') {

updateUI(entry.target.dataset.status);

}

});

});

//开始监听指定元素，只关注属性变化，并且只关心 ‘data-status’ 属性

observer.observe(element, {

attributes: true,

attributeFilter: ['data-status']

});

四、与现代框架Vue的协同

在这个 Vue.js 组件中，我们创建了一个用户卡片，它有一个动态绑定的 data-cy 属性，用于自动化测试，和一个 data-active 属性，表示卡片是否被选中。点击卡片会触发 toggleSelection 方法，该方法会切换 isSelected 的值，并且打印出 data-cy 属性的值。这样，我们就可以通过点击来选中或取消选中用户卡片，并且可以在控制台中看到当前操作的是哪个用户卡片。

五、开发避坑指南

1. 安全陷阱

问题：直接注入未过滤的 JSON 数据可能导致 XSS解决：用 JSON.stringify 转义特殊字符

// 错误写法

element.dataset.content = userInput;

// 正确写法

element.dataset.content = JSON.stringify(userInput);

2. 常见错误

连字符命名：HTML 写 data-order-id，JS 读 dataset.orderId数据类型：dataset 始终返回字符串，需手动转换数字/布尔值

3. 性能红线

存储限制：单个属性值不超过 1KB高频更新：避免每秒超过 100 次 dataset 修改

结语

自定义属性绝非简单的数据存储工具，而是连接 HTML 语义、JavaScript 逻辑与 CSS 表现层的核心纽带。通过本文的案例，我们可以看到它在状态管理、性能优化、跨组件通信等复杂场景中的强大能力。建议在实际项目中尝试以下组合技：

结合 MutationObserver 实现自动化的视图同步通过 data-* + CSS 变量实现动态主题切换利用自定义属性构建端到端测试的选择器体系

掌握这些模式后，你将发现自定义属性能大幅提升代码的可维护性和扩展性，真正成为前端开发的「瑞士军刀」。

—— 完 ——

✨ 至此结束 ✨ 💡 点赞关注，解锁更多技术干货！

我是 晷龙烬 期待与你的下次相遇～