zoukankan      html  css  js  c++  java

  • 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 = /(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. }  
  • 相关阅读:
    今天是全面开发的第一天，特此纪念
    Linux 进程管理 (ZZ)
    骑车上班
    VSFTPD配置小结（一）
    Flash Builder 4 在Chrome的调试
    测试一下Windows Live Writer
    转:C++强大的背后
    转:Flex中的Image屬性 (width, contentWidth, content.width)的差異
    Flash Builder 4 安装提示“安装程序检测到计算机重新启动操作可能处于挂起状态“的解决
    使用简单工厂和State模式替换冗余的 switchcase 语句
  • 原文地址：https://www.cnblogs.com/chengqiaoli/p/5355685.html
Copyright © 2011-2022 走看看