HTML data属性简介以及低版本浏览器兼容算法

实例

使用 data-* 属性来嵌入自定义数据：

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li> 
<li data-animal-type="spider">Tarantula</li> 
</ul>

 

浏览器支持

IEFirefoxChromeSafariOpera
     支持      支持      支持      支持      支持

所有主流浏览器都支持 data-* 属性。

定义和用法

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

  • 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
  • 属性值可以是任意字符串

注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。

 

语法

<element data-*="somevalue">

属性值

值描述
somevalue 规定属性的值（以字符串）。

 

HTML adta-*属性

==============【以上来自W3School】===================

【外加信息】

HTML标签可以添加自定义属性来存储和操作数据。但这样做会导致html语法上不符合Html规范。HTML5规范里增加了一个自定义data属性，自定义data属性的用法非常的简单，就可以往HTML标签上添加任意以 "data-"开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。 

下面的一个代码片段是一个有效的HTML5标记： 

 

[html] view plain copy
 
  1. <div id="item" data-id='123'>11111</div>  

 

可是，怎么来读取这些数据呢？你当然可以遍历页面元素来读取你想要的属性，但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj)，这个方法是在 jQuery1.4.3版本后出现的，它能返回相应的data属性。

 举个例子，你可以用下面的写法读取 data-id属性值--123： 

[javascript] view plain copy
 
  1. var myid= jQuery("#item").data('id');  

 

你还可以在"data-*" 属性里使用json语法，

[html] view plain copy
 
  1. <div id="item" data-id='{"game":"on"}'></div>  

你可以通过js直接访问这个数据，通过json的key值，你能得到相应的value： 

[javascript] view plain copy
 
  1. var gameStatus= jQuery("#item").data('id').game;  

你也可以通过.data(key,value)方法直接给"data-*" 属性赋值。一个重要的你要注意的事情是，这些"data-*" 属性应该和它所在的元素有一定的关联，不要把它当成存放任意东西的存储工具。尽管"data-*" 是HTML5才出现的属性，但jquery是通用的，所以，在非HTML5的页面或浏览器里，你仍然可以使用.data(obj)方法来操作"data-*" 数据。

================

==============【data属性低版本兼容】==================

【DEMO】

【效果】

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>dataset</title>  
  6.     <style>  
  7.         li{cursor: default;line-height: 1.8;}  
  8.         table{border-collapse: collapse;}  
  9.         th, td, caption{padding: 10px;border: 1px solid #ddd;font-size: 14px;}  
  10.         th{color: #999;}  
  11.         caption{font-size: 20px;font-weight: bold;border-bottom: none;}  
  12.         #card{position: absolute;top: 10px;left: 150px;}  
  13.     </style>  
  14. </head>  
  15. <body>  
  16.     <ul>  
  17.         <li data-id="123456" data-account-name="张威"  
  18.             data-name="张威" data-email="17777777777@163.com"   
  19.             data-mobile="17777777777">张威</li>  
  20.         <li data-id="123457" data-account-name="JokerWill"  
  21.             data-name="JokerWill" data-email="13333333333@163.com"   
  22.             data-mobile="13333333333">JokerWill</li>  
  23.     </ul>  
  24.     <div id="card" style="display:none">  
  25.         <table>  
  26.             <caption id="accountName"></caption>  
  27.             <tr><th>姓名：</th><td id="name"></td></tr>  
  28.             <tr><th>邮箱：</th><td id="email"></td></tr>  
  29.             <tr><th>手机：</th><td id="mobile"></td></tr>  
  30.         </table>  
  31.   
  32.     </div>  
  33.     <script>  
  34.         function $(id){  
  35.             return document.getElementById(id);  
  36.         }  
  37.         var lis = document.getElementsByTagName('li');  
  38.         for(var i = 0, li;li = lis[i]; i++){  
  39.             li.onmouseenter = function(event){  
  40.                 event = event || window.event;  
  41.                 var user = event.target|| event.srcElement;  
  42.                 //var data = user.dataset;  
  43.                 var data=get_dataset(user);  
  44.                 $('accountName').innerText = data.accountName;  
  45.                 $('name').innerText = data.name;  
  46.                 $('email').innerText = data.email;  
  47.                 $('mobile').innerText = data.mobile;  
  48.   
  49.                 $('card').style.display = 'block';  
  50.             };  
  51.   
  52.             li.onmouseleave = function(event){  
  53.                 $('card').style.display = 'none';  
  54.             };  
  55.   
  56.         }  
  57.           
  58.         //带兼容的函数  
  59.         function get_dataset(ele){  
  60.             if(ele.dataset)  
  61.                 return ele.dataset;  
  62.             else{  
  63.             //一下是兼容代码  
  64.                 var dataset = {};  
  65.                 var ele_split = ele.outerHTML.split(" ");  
  66.                 for(var i = 0,element; i < ele_split.length; i++)      
  67.                 {  
  68.                     element = ele_split[i];  
  69.                     if (element.substring(0,4) == "data") {   
  70.                         if (element.indexOf(">") !=  -1) {   
  71.                             element = element.split(">")[0];  
  72.                         };  
  73.                         ele_key=element.split("=")[0].slice(5);  
  74.                         ele_value=element.split("=")[1].slice(1,-1);  
  75.                         if(ele_key.indexOf("-") ==  -1){  
  76.                             dataset[ele_key] = ele_value;  
  77.                         }else{  
  78.                             ele_keys=ele_key.split("-");  
  79.                             ele_key=ele_keys[0];  
  80.                             for(i=1;i<ele_keys.length;i++){  
  81.                                 ele_key+=replaceReg(ele_keys[i]);  
  82.                             }                 
  83.                         }  
  84.                     };  
  85.                 }  
  86.                 return dataset;  
  87.             }  
  88.   
  89.         }  
  90.         //正则表达式变换首字母大写  
  91.          function replaceReg(str){   
  92.                var reg = /\b(\w)|\s(\w)/g;   
  93.                str = str.toLowerCase();   
  94.                return str.replace(reg,function(m){return m.toUpperCase()})   
  95.          }  
  96.     </script>  
  97. </body>  
  98. </html>  


【关键代码】

 

 

[html] view plain copy
 
    1. //带兼容的函数  
    2. function get_dataset(ele){  
    3.     if(ele.dataset)  
    4.         return ele.dataset;  
    5.     else{  
    6.     //一下是兼容代码  
    7.         var dataset = {};  
    8.         var ele_split = ele.outerHTML.split(" ");  
    9.         for(var i = 0,element; i < ele_split.length; i++)      
    10.         {  
    11.             element = ele_split[i];  
    12.             if (element.substring(0,4) == "data") {   
    13.                 if (element.indexOf(">") !=  -1) {   
    14.                     element = element.split(">")[0];  
    15.                 };  
    16.                 ele_key=element.split("=")[0].slice(5);  
    17.                 ele_value=element.split("=")[1].slice(1,-1);  
    18.                 if(ele_key.indexOf("-") ==  -1){  
    19.                     dataset[ele_key] = ele_value;  
    20.                 }else{  
    21.                     ele_keys=ele_key.split("-");  
    22.                     ele_key=ele_keys[0];  
    23.                     for(i=1;i<ele_keys.length;i++){  
    24.                         ele_key+=replaceReg(ele_keys[i]);  
    25.                     }                 
    26.                 }  
    27.             };  
    28.         }  
    29.         return dataset;  
    30.     }  
    31.   
    32. }  
posted @ 2016-04-05 16:43  品读夜的黑  阅读(1235)  评论(0)  编辑  收藏  举报