Please enable Javascript to view the contents

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

 ·  ☕ 1 分钟

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

大牛自然略过,不吝指教

代码如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
分享

Koala An
作者
Koala An
一个大自然的搬运工