找回密码
 注册

[JS] setAttribute, getAttribute, removeAttribute 和 IE6 7 8 的兼容性

php 发表于 2014/4/14 03:52 | 显示全部楼层 |阅读模式
首先说一下什么是setAttribute, getAttribute和removeAttribute
假设e是一个HTML元素,那么e.setAttribute(a,v) 将元素的属性a设置为v,e.getAttribute(a) 获取元素的a属性的值,
e.removeAttribute(a) 删除元素的a属性。
上面所说的属性可以是元素本来就有的属性,比如id,name等,也可以是自定义的属性名,比如data-time。
在众多的属性当中,有一个属性非常特殊,那就是class属性,html元素的CSS类名,在html元素中它的属性名是class
如<div class="hello world">Hello World!</div>,而在javascript中,它的属性名是className。
这就会出现一个很搞笑的结果,在IE6 IE7 IE8中,如上面的div代码中,我们通过以下代码重置元素的CSS类名
假设e代表这个div元素
使用e.setAttribute('class','hello world good morning');来设置元素的CSS类名
然后再用e.className来获取CSS类,得到的却还是hello world,上面的设置根本没有起作用
而在Google Chrome、Firefox、Opera、Safari等标准浏览器中,得到的却是设置以后的hello world good morning
究其原因,就是因为IE6 7 8 认为class和className是两个不同的属性,通过e.setAttribute重置CSS类后,e.className并没有改变
同理,如果我们通过e.className='xxx';来重置CSS类,然后通过e.getAttribute('class')获取到的也是重置之前的值。
正是因为这个原因,IE6 IE7 IE8中,如果设置了e.className='xxx',我们使用e.removeAttribute('class')是没办法移除元素的CSS类的,IE6 IE7 IE8 removeAttribute('class')失效就是这个原因造成的,因为只是移除了class属性,而className还在。
所以,在IE6 IE7 IE8中要谨慎使用setAttribute getAttribute 和 removeAttribute, 最好的办法就是重写这三个函数。
兼容Google Chrome、Firefox、Opera、Safari、IE6-11等所有主流浏览器的setAttribute, getAttribute和removeAttribute
为了防止代码被编辑器或出现乱码,请下载附件测试使用,不要直接复制以下代码。
  1. <script type="text/javascript">
  2.         /*
  3.          * 设置HTML元素属性
  4.          * www.51-n.com 原创 吴先成 qQ229256237
  5.          * @param object o 要设置属性的HTML元素
  6.          * @param string a 要设置的属性名        
  7.          * @param string v 要设置的属性值
  8.         */
  9.         function setAttribute(o,a,v){
  10.                 if(typeof o!='object'||typeof a!='string') return;
  11.                 a=='class'?o.className=v:o.setAttribute(a,v);
  12.         }
  13.         /*
  14.          * 获取HTML元素属性值
  15.          * @param object o 要获取属性的HTML元素
  16.          * @param string a 要获取的属性名
  17.          * @return 返回要获取的属性值
  18.         */               
  19.         function getAttribute(o,a){
  20.                 if(typeof o!='object'||typeof a!='string') return;
  21.                 return a=='class'?o.className:o.getAttribute(a);
  22.         }
  23.         /*
  24.          * 移除HTML元素属性
  25.          * @param object o 要移除属性的HTML元素
  26.          * @param string a 要移除的属性名        
  27.         */               
  28.         function removeAttribute(o,a){
  29.                 if(typeof o!='object'||typeof a!='string') return;
  30.                 o.removeAttribute(a);
  31.                 if(a=='class') o.removeAttribute('className');
  32.         }
  33. </script>
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
1358568060 发表于 2015/1/16 17:50 | 显示全部楼层
ie8没有这个问题
回复

使用道具 举报

手机版|轻松E站

轻松E站

快速回复 返回顶部 返回列表