首先说一下什么是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
为了防止代码被编辑器或出现乱码，请下载附件测试使用，不要直接复制以下代码。- <script type="text/javascript">
- /*
- * 设置HTML元素属性
- * www.51-n.com 原创 吴先成 qQ229256237
- * @param object o 要设置属性的HTML元素
- * @param string a 要设置的属性名
- * @param string v 要设置的属性值
- */
- function setAttribute(o,a,v){
- if(typeof o!='object'||typeof a!='string') return;
- a=='class'?o.className=v:o.setAttribute(a,v);
- }
- /*
- * 获取HTML元素属性值
- * @param object o 要获取属性的HTML元素
- * @param string a 要获取的属性名
- * @return 返回要获取的属性值
- */
- function getAttribute(o,a){
- if(typeof o!='object'||typeof a!='string') return;
- return a=='class'?o.className:o.getAttribute(a);
- }
- /*
- * 移除HTML元素属性
- * @param object o 要移除属性的HTML元素
- * @param string a 要移除的属性名
- */
- function removeAttribute(o,a){
- if(typeof o!='object'||typeof a!='string') return;
- o.removeAttribute(a);
- if(a=='class') o.removeAttribute('className');
- }
- </script>
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？新建账号
×
|
