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

关于这个主题的文章和博客其实已经非常多了,这里并非要重复造轮子,只是看到一些例子稍微有点麻烦,其实也很简单,但是对于一个刚刚入门的人,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.根据浏览器弹出这个属性的值

 

posted @ 2015-04-26 00:37  安仲炜  阅读(956)  评论(0编辑  收藏  举报