HTML5 data-* 自定义属性

来源：互联网发布：2016年最红的网络歌曲编辑：程序博客网时间：2024/05/16 12:27

<!DOCTYPE HTML><html>    <head>        <title>Test Demo....</title>    </head>    <body>        <div id="container">            <span class="right"                 data-id = "0001"                 data-title = "标题0001"                 data-description = "描述0001"                 data-role = "1">                Test1            </span>            <span class="right"                 data-id = "0002"                 data-title = "标题0002"                 data-description = "描述0002"                 data-role = "2">                Test2            </span>        </div>        <div id="result">        </div>    </body>    <script type="text/javascript">        var arr = document.getElementsByClassName("right");        for (var i = 0; i < arr.length; i++) {            arr[i].onclick = function() {                var rt = '<br />';                var id = this.dataset.id;                var title = this.dataset.title;                var description = this.dataset.description;                var role = this.dataset.role;                document.getElementById("result").innerHTML = "ID: " + id + rt                                                             + "Title: " + title + rt                                                             + "Description: " + description + rt                                                             + "Role: " + role;            }        }    </script></html>

在标签中写入自定义属性
用dataset 获取自定义属性集合

0 0