在HTML5中定做数据属性 _HTML/CSS

在HTML5中定制数据属性

下面的例子展示了你如何在HTML5中定制数据的属性。使用dataset属性和getAttribute()方法。

<!DOCTYPE html>
<html>
<head>
    <title>Using custom data attributes in HTML5</title>
    <style type="text/css">
        th {
            font-style: italic;
            font-weight: normal;
            text-align: right;
        }
    </style>
</head>
<body>
 
    <table id="status" data-city="San Francisco" data-zipCode="94121-1437" data-user-name="Peter">
        <tr>
            <th>dataset.zipcode:</th>
            <td id="cell1"></td>
        </tr>
        <tr>
            <th>dataset['zipcode']:</th>
            <td id="cell2"></td>
        </tr>
        <tr>
            <th>getAttribute('data-zipCode'):</th>
            <td id="cell3"></td>
        </tr>
        <tr>
            <th>dataset.userName:</th>
            <td id="cell4"></td>
        </tr>
        <tr>
            <th>dataset['userName']:</th>
            <td id="cell5"></td>
        </tr>
        <tr>
            <th>getAttribute('data-user-name'):</th>
            <td id="cell6"></td>
        </tr>
    </table>
    <button id="btn" onclick="btn_clickHandler(event);">Click to get dataset zipCode and user-name</button>
 
    <script type="text/javascript">
        function btn_clickHandler(event) {
            var stat = document.getElementById("status");
 
            document.getElementById("cell1").innerText = stat.dataset.zipcode;
            document.getElementById("cell2").innerText = stat.dataset["zipcode"];
            document.getElementById("cell3").innerText = stat.getAttribute("data-zipCode");
 
            document.getElementById("cell4").innerText = stat.dataset.userName;
            document.getElementById("cell5").innerText = stat.dataset["userName"];
            document.getElementById("cell6").innerText = stat.getAttribute("data-user-name");
        }
    </script>
 
</body>
</html>

源码下载：

using-custom-data-attributes-in-html5.zip