HTML如何定义数据属性？自定义属性使用教程与实用技巧

HTML数据属性是HTML5引入的一种标准自定义属性方案，允许开发者给任意HTML元素添加额外的自定义数据，这些数据不会在页面渲染时显示，仅用于脚本交互或数据存储。数据属性的核心是以data-为前缀，后续可以跟上自定义的属性名，属性名可以包含字母、数字、连字符，但不能包含大写字母。

数据属性的定义规则

定义数据属性时，必须严格遵循data-自定义名称的格式，自定义名称部分如果包含多个单词，建议使用连字符分隔，比如data-user-id，不建议使用驼峰命名，因为HTML属性名是不区分大小写的，驼峰命名可能会导致读取时出现偏差。

下面是一个标准的数据属性定义示例：

<!-- 给div元素定义多个数据属性 -->
<div class="user-card" 
     data-user-id="1001" 
     data-user-name="张三" 
     data-user-age="25" 
     data-is-vip="true">
  用户信息卡片
</div>

通过JavaScript操作数据属性

定义好数据属性后，我们可以通过JavaScript的dataset属性来读取和修改数据属性的值，dataset是一个DOMStringMap对象，存储了元素上所有data-开头的属性。

读取数据属性

读取时需要将连字符命名的属性名转换为驼峰命名，比如data-user-id对应dataset.userId，data-user-name对应dataset.userName。

// 获取元素
const userCard = document.querySelector('.user-card');
// 读取数据属性
const userId = userCard.dataset.userId;
const userName = userCard.dataset.userName;
const userAge = userCard.dataset.userAge;
const isVip = userCard.dataset.isVip;

console.log(userId); // 输出 "1001"
console.log(userName); // 输出 "张三"
console.log(userAge); // 输出 "25"
console.log(isVip); // 输出 "true"

修改数据属性

修改数据属性直接给dataset对应的属性赋值即可，赋值后页面元素的属性会同步更新。

// 修改用户年龄
userCard.dataset.userAge = "26";
// 新增一个数据属性
userCard.dataset.userEmail = "test@ipipp.com";
// 删除数据属性
delete userCard.dataset.isVip;

数据属性的实用技巧

技巧1：存储复杂数据类型

数据属性的属性值只能是字符串类型，如果需要存储对象、数组等复杂数据，可以先通过JSON.stringify序列化，读取时再用JSON.parse反序列化。

<div class="product" 
     data-product-info='{"id":2001,"name":"笔记本电脑","price":4999,"tags":["数码","办公"]}'>
  商品信息
</div>

const product = document.querySelector('.product');
// 读取并反序列化复杂数据
const productInfo = JSON.parse(product.dataset.productInfo);
console.log(productInfo.name); // 输出 "笔记本电脑"
console.log(productInfo.tags); // 输出 ["数码","办公"]

技巧2：结合CSS使用数据属性

数据属性也可以作为CSS选择器的匹配条件，根据数据属性的值设置不同的样式，比如根据用户的VIP状态显示不同的背景色。

/* 匹配data-is-vip为true的元素 */
[data-is-vip="true"] {
  background-color: #f0f9eb;
  color: #67c23a;
}
/* 匹配data-user-age大于18的元素 */
[data-user-age] {
  font-weight: bold;
}

数据属性的常见应用场景

• 存储元素绑定的业务ID，比如列表项的唯一标识，方便后续操作对应数据
• 传递组件初始化参数，比如给自定义组件传递配置项，不需要额外定义全局变量
• 存储临时状态，比如表单元素的校验状态、按钮的加载状态等
• 实现简单的页面数据缓存，避免频繁请求接口获取相同数据

注意事项

• 不要滥用数据属性，仅用于存储和元素相关的额外数据，不要用来存储大量或者无关的数据
• 数据属性的属性名不要包含大写字母，虽然浏览器可能兼容，但不符合规范
• 不要在数据属性中存储敏感信息，因为用户可以通过浏览器开发者工具直接查看元素属性
• 如果需要兼容IE10及以下浏览器，dataset属性不支持，需要使用getAttribute和setAttribute方法操作

// 兼容低版本浏览器的数据属性读取方式
const userId = userCard.getAttribute('data-user-id');
// 兼容低版本浏览器的数据属性修改方式
userCard.setAttribute('data-user-id', '1002');

HTMLdata_attributecustom_attributeJavaScript修改时间：2026-07-01 20:12:28