data-*

 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>