HTML5 自定義屬性 data-*

Posted on Edited on In , Views: Disqus:

 

一、

自從 HTML5 支援了自定義屬性 data-* 之後，現在也可以把資料放入 data-* 裡面，

並可利用 jQuery 的 .data 來取資料

來看範例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>

<body>
    <div class="person" data-name="brooke" data-id="a12345">
        <p></p>
    </div>

    <script>
        $("p").append(
            $(".person").data("name") + " : " + $(".person").data("id")
        );
    </script>
</body>

</html>

執行結果為

說明：

當中我把資料藏在 data-name 與 data-id 中，然後於 <p> 元素裡秀出資料。

 

二、

data-* 也可支援 json 語法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>

<body>
    <div id="awesome-json" data-awesome='{"game":"brooke"}'></div>
    <p></p>
    <script>
        $(document).ready(function () {
            $("p").append(
                $("#awesome-json").data("awesome").game
            );
        });
    </script>
</body>

</html>

執行結果

 

参考資料：

HTML data-* Attributes

利用 jQuery 的 data 方法取數值時的陷阱