码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-26 01:18:26      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

标签:

原文地址:http://www.cnblogs.com/azhw/p/4457198.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!