1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <div id = "user" uid = "12345" data-uname = "愚人码头" data-date-of-birth> </div>
9 <script>
10 // 使用getAttribute获取 data- 属性
11 var user = document . getElementById ( 'user' ) ;
12 var userName = user .dataset.uname; // userName = '愚人码头'
13 var userId = user . getAttribute ( 'uid' ) ; // userId = '12345'
14
15 // 使用setAttribute设置 data- 属性
16 user . setAttribute ( 'site' , 'http://www.css88.com' ) ;
17 console.log(1111,userName,userId,user.getAttribute('site'))
18
19
20 var dateofbirth = user.dataset.dateOfBirth = '1985-01-05'; // 设置data-date-of-birth的值.
21 console.log(dateofbirth,"dataset属性只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+浏览器中实现")
22 user.dataset.someDataAttr = 'mydata';//即使不存在的属性一旦挂上去之后就有了，认真脸
23 console.log('someDataAttr' in user.dataset);//true
24
25 </script>
26 </body>
27 </html>
