关于html标签元素的data-*属性

浏览数：40 / 时间：2015年06月09日

关于这个主题的文章和博客其实已经非常多了，这里并非要重复造轮子，只是看到一些例子稍微有点麻烦，其实也很简单，但是对于一个刚刚入门的人，w3c的例子甚至可能看不懂，这里列出一个最简单不过的小案例以供参考

大牛自然略过，不吝指教

代码如下

 1 <html>
 2 <head>
 3     <title>Html5 custom data attribute Test</title>
 4 </head>
 5 <body >
 6    <div class="user" data-name="xiaoan"></div>
 7  <script type="text/javascript">
 8       var user = document.getElementsByTagName("div")[0];
 9       if(isIe()){
           //如果是ie浏览器这样调用
10         alert(user.getAttribute(‘data-name‘));
11       }
12       else{
           //非ie浏览器调用方法
13         alert(user.dataset[‘name‘]);
14       }
15 //判断是否是ie，但是在ie10 或者ie11下，实际检测出来的效果是false，这里稍微注意一下即可
16       function isIe(){
17         return window.ActiveXObject ? true : false;
18       }
19  </script>
20 </body>
21 </html>

这足够简单了吧，

1.定义一个div标签，一个属性叫做data-name,  data-  是固定的，后面的随意

2.根据浏览器弹出这个属性的值

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log 代码 java si html it la class style log 代码 java si html it la

相关文章

随机文章

您可能还喜欢

您可能还喜欢