html标签：自定义数据属性使用场景

by zhuzhenPosted on

♦ 什么是自定义数据属性

在 HTML 标签中，自定义数据属性（Custom Data Attributes）是 HTML5 引入的一项特性，其名称以 data- 开头。这种属性允许开发者在 HTML 元素上存储额外的自定义数据，而无需使用非标准的属性或者在元素上添加 JavaScript 对象来存储数据。这些自定义数据属性可以通过 JavaScript 方便地访问和操作，并且不会影响元素的外观和标准行为。

♦ 使用场景

◆ 存储额外数据用于 JavaScript 操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Data Attribute Example</title>
</head>

<body>
    <button id="myButton" data-price="19.99">购买</button>
    <script>
        const button = document.getElementById('myButton');
        // 获取自定义数据属性的值
        const price = button.dataset.price;
        button.addEventListener('click', function () {
            alert(`商品价格是：$${price}`);
        });
    </script>
</body>

</html>

在这个示例中，<button> 元素上使用了 data-price 自定义数据属性来存储商品的价格。通过 button.dataset.price 可以方便地获取该属性的值，并在点击按钮时弹出包含商品价格的提示框。

◆ 与 CSS 结合实现样式控制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Data Attribute with CSS</title>
    <style>
        /* 根据自定义数据属性的值应用不同的样式 */
        [data-status="active"] {
            color: green;
        }

        [data-status="inactive"] {
            color: red;
        }
    </style>
</head>

<body>
    <p data-status="active">这个项目是活跃的。</p>
    <p data-status="inactive">这个项目是不活跃的。</p>
</body>

</html>

在这个示例中，通过 CSS 的属性选择器 [data-status="active"] 和 [data-status="inactive"] 根据 data-status 自定义数据属性的值为 <p> 元素应用不同的文本颜色。