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

时间：2022-05-22 20:02:47

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

大牛自然略过，不吝指教

代码如下

 <html>

 <head>

     <title>Html5 custom data attribute Test</title>

 </head>

 <body >

    <div class="user" data-name="xiaoan"></div>

  <script type="text/javascript">

       var user = document.getElementsByTagName("div")[0];

       if(isIe()){
           //如果是ie浏览器这样调用

         alert(user.getAttribute('data-name'));

       }

       else{
           //非ie浏览器调用方法

         alert(user.dataset['name']);

       }

 //判断是否是ie，但是在ie10 或者ie11下，实际检测出来的效果是false，这里稍微注意一下即可

       function isIe(){

         return window.ActiveXObject ? true : false;

       }

  </script>

 </body>

 </html>

这足够简单了吧，

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

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

相关文章