HTML5 data-*自定义数据属性的示例代码

HTML5 data-* 自定义数据属性示例
我将创建一个展示如何使用HTML5 data-*属性的交互式示例，这些属性允许我们在HTML元素中存储自定义数据。
设计思路

展示不同类型的data属性
演示如何通过JavaScript访问和操作这些数据
添加交互功能以动态修改data属性
提供清晰的视觉反馈
下面是完整的实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 data-* 自定义数据属性示例</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 2px solid #4a6ee0;
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .subtitle {
            color: #7f8c8d;
            font-size: 1.2rem;
        }

        .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }

        @media (max-width: 768px) {
            .content {
                grid-template-columns: 1fr;
            }
        }

        .example-section {
            background-color: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        .example-section h2 {
            color: #4a6ee0;
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .product-card {
            border: 2px solid #e1e8f0;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            transition: all 0.3s ease;
            background-color: #f9fbfd;
        }

        .product-card:hover {
            border-color: #4a6ee0;
            box-shadow: 0 5px 12px rgba(74, 110, 224, 0.1);
        }

        .product-card h3 {
            margin-top: 0;
            color: #2c3e50;
        }

        .product-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin: 15px 0;
        }

        .product-info div {
            padding: 8px;
            background-color: #edf2f7;
            border-radius: 4px;
            font-size: 0.9rem;
        }

        .data-display {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
            margin-top: 15px;
            font-size: 0.95rem;
        }

        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        button {
            background-color: #4a6ee0;
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.2s;
        }

        button:hover {
            background-color: #3a5bc7;
        }

        button.secondary {
            background-color: #6c757d;
        }

        button.secondary:hover {
            background-color: #5a6268;
        }

        .update-form {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
        }

        input[type="text"],
        input[type="number"],
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }

        .highlight {
            color: #e74c3c;
            font-weight: bold;
        }

        .info-box {
            background-color: #e8f4fd;
            border-left: 4px solid #4a6ee0;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
        }

        footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
            color: #7f8c8d;
            font-size: 0.9rem;
        }

        .data-key {
            color: #3498db;
        }

        .data-value {
            color: #2ecc71;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>HTML5 data-* 自定义数据属性</h1>
            <p class="subtitle">使用 data-* 属性在HTML元素中存储自定义数据</p>
        </header>

        <div class="info-box">
            <p><strong>data-* 属性说明：</strong> data-* 属性允许我们在标准HTML元素中存储自定义数据。这些属性不会影响页面布局或样式，但可以通过JavaScript访问，为网页添加额外的交互功能。</p>
            <p>格式: <code>data-*="值"</code>，其中 * 可以是任何自定义名称，例如: data-id, data-price, data-category等。</p>
        </div>

        <div class="content">
            <div class="example-section">
                <h2>产品卡片示例</h2>
                <p>下面的产品卡片使用data-*属性存储附加信息：</p>

                <div class="product-card" 
                     id="product1"
                     data-id="P001"
                     data-name="无线蓝牙耳机"
                     data-price="299.99"
                     data-category="电子产品"
                     data-stock="15"
                     data-brand="SoundTech"
                     data-rating="4.5">
                    <h3>无线蓝牙耳机</h3>
                    <p>高品质无线蓝牙耳机，带降噪功能，续航时间长达30小时。</p>

                    <div class="product-info">
                        <div>价格: <span class="highlight">¥299.99</span></div>
                        <div>库存: <span class="highlight">15</span> 件</div>
                        <div>品牌: <span class="highlight">SoundTech</span></div>
                        <div>评分: <span class="highlight">4.5</span> / 5</div>
                    </div>

                    <div class="data-display">
                        当前data属性值:<br>
                        data-id="<span class="data-value" id="disp-id">P001</span>"<br>
                        data-name="<span class="data-value" id="disp-name">无线蓝牙耳机</span>"<br>
                        data-price="<span class="data-value" id="disp-price">299.99</span>"<br>
                        data-category="<span class="data-value" id="disp-category">电子产品</span>"<br>
                        data-stock="<span class="data-value" id="disp-stock">15</span>"<br>
                        data-brand="<span class="data-value" id="disp-brand">SoundTech</span>"<br>
                        data-rating="<span class="data-value" id="disp-rating">4.5</span>"
                    </div>

                    <div class="controls">
                        <button onclick="showAllData()">显示所有data属性</button>
                        <button onclick="updateStock()" class="secondary">库存-1</button>
                        <button onclick="showCategory()" class="secondary">显示产品类别</button>
                        <button onclick="calculateDiscount()">计算8折价格</button>
                    </div>
                </div>

                <div class="update-form">
                    <h3>更新产品数据</h3>
                    <div class="form-group">
                        <label for="update-field">选择属性:</label>
                        <select id="update-field">
                            <option value="data-name">产品名称 (data-name)</option>
                            <option value="data-price">价格 (data-price)</option>
                            <option value="data-stock">库存 (data-stock)</option>
                            <option value="data-brand">品牌 (data-brand)</option>
                            <option value="data-rating">评分 (data-rating)</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="update-value">新值:</label>
                        <input type="text" id="update-value" placeholder="输入新值...">
                    </div>

                    <button onclick="updateDataAttribute()">更新data属性</button>
                </div>
            </div>

            <div class="example-section">
                <h2>JavaScript访问方法</h2>
                <p>以下是通过JavaScript访问和操作data-*属性的几种方法：</p>

                <h3>1. 使用 dataset 属性</h3>
                <div class="data-display">
                    <code>
                        // 获取元素<br>
                        const product = document.getElementById('product1');<br><br>

                        // 访问data属性<br>
                        const id = product.dataset.id; // "P001"<br>
                        const price = product.dataset.price; // "299.99"<br>
                        const stock = product.dataset.stock; // "15"<br><br>

                        // 修改data属性<br>
                        product.dataset.stock = "10";<br>
                        product.dataset.discount = "20%"; // 添加新属性
                    </code>
                </div>

                <h3>2. 使用 getAttribute() 方法</h3>
                <div class="data-display">
                    <code>
                        // 获取data属性值<br>
                        const category = product.getAttribute('data-category');<br>
                        const rating = product.getAttribute('data-rating');<br><br>

                        // 设置data属性值<br>
                        product.setAttribute('data-rating', '4.7');<br>
                        product.setAttribute('data-new', 'true');
                    </code>
                </div>

                <h3>3. 在CSS中使用data属性</h3>
                <div class="data-display">
                    <code>
                        /* 根据data-stock值设置不同样式 */<br>
                        .product-card[data-stock="0"] {<br>
                        &nbsp;&nbsp;opacity: 0.6;<br>
                        &nbsp;&nbsp;border-color: #e74c3c;<br>
                        }<br><br>

                        /* 使用attr()函数显示data属性内容 */<br>
                        .product-card::after {<br>
                        &nbsp;&nbsp;content: attr(data-category);<br>
                        &nbsp;&nbsp;font-size: 0.8rem;<br>
                        &nbsp;&nbsp;color: #7f8c8d;<br>
                        }
                    </code>
                </div>

                <h3>控制台输出</h3>
                <div class="data-display" id="console-output">
                    点击左侧按钮查看输出结果...
                </div>

                <div class="controls">
                    <button onclick="clearConsole()">清空控制台</button>
                </div>
            </div>
        </div>

        <footer>
            <p>HTML5 data-* 属性示例 &copy; 2023 | 使用现代浏览器查看最佳效果</p>
            <p>注意: data-* 属性值总是字符串类型，使用前可能需要类型转换</p>
        </footer>
    </div>

    <script>
        // 获取产品元素
        const product = document.getElementById('product1');

        // 显示所有data属性
        function showAllData() {
            const output = document.getElementById('console-output');
            let html = '<strong>所有data属性:</strong><br>';

            // 使用dataset获取所有data属性
            const dataAttributes = product.dataset;

            for(let key in dataAttributes) {
                html += `<span class="data-key">${key}</span>: <span class="data-value">${dataAttributes[key]}</span><br>`;
            }

            output.innerHTML = html;

            // 也在浏览器控制台输出
            console.log("产品所有data属性:", dataAttributes);
        }

        // 更新库存
        function updateStock() {
            let currentStock = parseInt(product.dataset.stock);

            if(currentStock > 0) {
                currentStock--;
                product.dataset.stock = currentStock.toString();

                // 更新显示
                document.getElementById('disp-stock').textContent = currentStock;

                // 更新产品卡片中的库存显示
                const stockElement = document.querySelector('.product-info div:nth-child(2) span');
                stockElement.textContent = currentStock;

                // 控制台输出
                const output = document.getElementById('console-output');
                output.innerHTML = `<span class="data-key">库存已更新</span>: <span class="data-value">${currentStock}</span>`;

                console.log(`库存更新为: ${currentStock}`);

                // 如果库存为0，添加低库存样式
                if(currentStock === 0) {
                    product.style.borderColor = '#e74c3c';
                    product.style.backgroundColor = '#fff5f5';
                }
            } else {
                const output = document.getElementById('console-output');
                output.innerHTML = '<span class="highlight">库存已售罄！</span>';
            }
        }

        // 显示产品类别
        function showCategory() {
            const category = product.dataset.category;
            const output = document.getElementById('console-output');
            output.innerHTML = `<span class="data-key">产品类别</span>: <span class="data-value">${category}</span>`;

            console.log(`产品类别: ${category}`);
        }

        // 计算折扣价格
        function calculateDiscount() {
            const price = parseFloat(product.dataset.price);
            const discountPrice = price * 0.8;

            const output = document.getElementById('console-output');
            output.innerHTML = `
                <span class="data-key">原价</span>: <span class="data-value">¥${price.toFixed(2)}</span><br>
                <span class="data-key">8折价格</span>: <span class="data-value">¥${discountPrice.toFixed(2)}</span>
            `;

            console.log(`原价: ¥${price}, 8折价格: ¥${discountPrice.toFixed(2)}`);
        }

        // 更新data属性
        function updateDataAttribute() {
            const field = document.getElementById('update-field').value;
            const value = document.getElementById('update-value').value;

            if(!value.trim()) {
                alert('请输入新值！');
                return;
            }

            // 更新data属性
            product.setAttribute(field, value);

            // 更新显示
            const fieldName = field.replace('data-', '');
            const displayElement = document.getElementById(`disp-${fieldName}`);

            if(displayElement) {
                displayElement.textContent = value;

                // 如果是价格或库存，也更新产品卡片中的显示
                if(fieldName === 'price') {
                    const priceElement = document.querySelector('.product-info div:nth-child(1) span');
                    priceElement.textContent = `¥${value}`;
                } else if(fieldName === 'stock') {
                    const stockElement = document.querySelector('.product-info div:nth-child(2) span');
                    stockElement.textContent = value;

                    // 如果库存为0，添加低库存样式
                    if(parseInt(value) === 0) {
                        product.style.borderColor = '#e74c3c';
                        product.style.backgroundColor = '#fff5f5';
                    } else {
                        product.style.borderColor = '#e1e8f0';
                        product.style.backgroundColor = '#f9fbfd';
                    }
                } else if(fieldName === 'name') {
                    const nameElement = document.querySelector('.product-card h3');
                    nameElement.textContent = value;
                } else if(fieldName === 'brand') {
                    const brandElement = document.querySelector('.product-info div:nth-child(3) span');
                    brandElement.textContent = value;
                } else if(fieldName === 'rating') {
                    const ratingElement = document.querySelector('.product-info div:nth-child(4) span');
                    ratingElement.textContent = value;
                }
            }

            // 控制台输出
            const output = document.getElementById('console-output');
            output.innerHTML = `<span class="data-key">${field}</span> 已更新为: <span class="data-value">${value}</span>`;

            console.log(`${field} 更新为: ${value}`);

            // 清空输入框
            document.getElementById('update-value').value = '';
        }

        // 清空控制台输出
        function clearConsole() {
            document.getElementById('console-output').innerHTML = '点击左侧按钮查看输出结果...';
        }

        // 页面加载时显示初始数据
        window.addEventListener('DOMContentLoaded', () => {
            console.log('页面加载完成，产品data属性:', product.dataset);
        });
    </script>
</body>
</html>