自定义属性(data-*)

HTML5自定义属性以data-为前缀，用于在元素上存储自定义数据。

基本语法

命名规则

<!-- 格式：data-自定义名称 -->
<div data-id="123"></div>
<div data-user-name="张三"></div>
<div data-role="admin"></div>

属性名只能包含小写字母、数字和连字符(-)，不能以数字开头。

命名转换规则

使用方式

存储简单数据

<div id="user" data-id="1001" data-name="张三" data-age="25">
    用户信息
</div>

<script>
    const user = document.getElementById('user');

    // 读取数据
    console.log(user.dataset.id);    // "1001"
    console.log(user.dataset.name);  // "张三"
    console.log(user.dataset.age);   // "25"

    // 修改数据
    user.dataset.name = "李四";

    // 添加新属性
    user.dataset.city = "北京";
</script>

存储JSON数据

<div id="product" data-info='{"id":101,"name":"手机","price":3999}'>
    商品信息
</div>

<script>
    const product = document.getElementById('product');
    const info = JSON.parse(product.dataset.info);

    console.log(info.name);   // "手机"
    console.log(info.price);  // 3999
</script>

实际应用场景

列表项数据绑定

<ul id="user-list">
    <li data-id="1" data-name="张三" data-email="zhangsan@example.com">
        张三
    </li>
    <li data-id="2" data-name="李四" data-email="lisi@example.com">
        李四
    </li>
</ul>

<script>
    document.getElementById('user-list').addEventListener('click', function(e) {
        if (e.target.tagName === 'LI') {
            const id = e.target.dataset.id;
            const name = e.target.dataset.name;
            const email = e.target.dataset.email;
            console.log(`ID: ${id}, 姓名: ${name}, 邮箱: ${email}`);
        }
    });
</script>

表单验证数据

<form id="myForm">
    <input type="text" name="username" data-validate="required" data-min="3">
    <input type="email" name="email" data-validate="required|email">
</form>

条件渲染标记

<div data-role="admin" data-permission="edit,delete">
    管理员面板
</div>

<div data-role="user" data-permission="view">
    普通用户面板
</div>

CSS访问data属性

属性选择器

/* 选择特定data属性 */
[data-role="admin"] {
    background-color: #f0f0f0;
}

/* 属性包含某值 */
[data-permission~="edit"] {
    color: blue;
}

/* 属性开头匹配 */
[data-id^="user-"] {
    border: 1px solid #ccc;
}

attr()函数

/* 显示data属性值 */
[data-tooltip]::after {
    content: attr(data-tooltip);
    display: none;
}

[data-tooltip]:hover::after {
    display: block;
}

<button data-tooltip="点击保存">保存</button>

API对比

const el = document.querySelector('div');

// dataset方式（推荐）
el.dataset.id = '123';
console.log(el.dataset.id);

// getAttribute方式
el.setAttribute('data-id', '123');
console.log(el.getAttribute('data-id'));

要点总结

1. 命名规范：data-前缀，小写字母和连字符
2. 驼峰转换：data-user-name → dataset.userName
3. 类型注意：dataset获取的值都是字符串
4. JSON解析：复杂数据需用JSON.parse解析