h5新特性<data*>

上代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8     <div id="student"data-id="1505110034"data-name="小乖"data-date-of-birth>哈哈</div>
 9 
10     <script>
11 
12     var el = document.querySelector('#student');
13 
14     console.log(el.id);
15 
16     console.log(el.dataset);
17 
18     console.log(el.dataset.id);
19 
20     console.log(el.dataset.name);
21 
22     console.log(el.dataset.dateOfBirth);
23 
24     el.dataset.dateOfBirth ='1996-09-26';
25 
26     console.log('someDataAttr' in el.dataset);
27 
28     el.dataset.someDataAttr ='mydata';
29 
30     console.log('someDataAttr' in el.dataset);
31     </script>
32     </body>
33 </html>

效果图：

 参考：http://blogread.cn/it/article/7284?f=wb

posted @ 2017-12-12 20:55  gaoxuerong  阅读(110)  评论(0)  编辑  收藏  举报