仅IE支持clearAttributes/mergeAttributes方法使用介绍
更新时间：2012年05月04日 16:17:45 作者：
仅IE中HTMLElement元素具有clearAttributes/mergeAttributes方法，它们都是非标准的
一、.clearAttributes()
该方法用来清除所有用户定义的属性。如下
复制代码 代码如下:
<div style="color:red;" onclick="alert(1)" data-a="a" data-b="b">Division</div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.outerHTML);
div.clearAttributes();
alert(div.outerHTML);
</script>
运行后依次弹出如下
可以看到，第二次alert出的outerHTML已经没有了“data-a”，“data-b”，“onclick=alert(1)”属性。前两个属性是自定义的，onclick则是自有的但也清除了。
虽然outerHTML清除了，但事件并没有真正清除。点击div仍然会弹出1。（注意：对于元素自由属性如id，name，style是不会被清除的）
以上发现onclick属性在outerHTML虽然删除了，但事件handler却没有删除，点击仍然可以触发。那么通过attachEvent方式添加的事件能清除吗？ 试试便知
复制代码 代码如下:
<div>division</div>
<script>
var div = document.getElementsByTagName('div')[0];
div.attachEvent('onclick', function(){alert(1)});
div.clearAttributes();
</script>
测试发现，IE6/7/8中点击该div不会弹出1，但IE9中仍然会弹出。即IE9中不能通过clearAttributes清除attachEvent方式添加的事件handler。
二、.mergeAttributes()
该方法用来把指定元素的所有属于拷贝到自己身上，包括attributes、events、styles。如下
复制代码 代码如下:
<div id="head" style="color:red;" onclick="alert(1)" data-a="a">Division</div>
<p>paragraph</p>
<script>
var div = document.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];
alert(p.outerHTML);
p.mergeAttributes(div);
alert(p.outerHTML);
</script>
拷贝前p的outerHTML
拷贝后p的outerHTML
对比就知道div的style（styles）、onclick（events）、data-a（user-defined attributes）都拷贝到p上了。现在点击p也能alert出1。
细心的同学会发现div的id没有拷贝过来。的确，在IE5之前，attributes是只读的，id/name不被合并。IE5.5后则可以通过指定第二个参数值决定是否拷贝id/name属性。
只需将mergeAttributes的第二个参数指定为false，就可以拷贝id/name了。如
p.mergeAttributes(div,false);
效果
相关：
http://msdn.microsoft.com/en-us/library/ie/ms536350%28v=vs.85%29.aspx
http://msdn.microsoft.com/en-us/library/ie/ms536614%28v=vs.85%29.aspx
相关文章
js函数中有个储存参数的数组arguments，因此js版支持参数默认值的函数可以通过另外一种变通的方法实现2014-05-05
这段时间看了下bootstrap的时间控件，发现使用起来还是很简单的，趁着有时间的时候整理了一下，特此分享到脚本之家平台，感兴趣的朋友参考下2017-07-07
css中对于定宽的非浮动元素用margin:0 auto进行水平居中，对于不定宽的浮动元素也有一个常用技巧，这篇文章就给大家介绍下css如何让浮动元素水平居中，需要的朋友可以来学习下2015-08-08
通过Three.js的材质和几何体,我们可以很方便的创建基础3D模型,下面这篇文章主要给大家介绍了关于three.js载入常用类型3D模型的几种方法,需要的朋友可以参考下2024-04-04
本文主要介绍了TypeScript 判断两个数组的内容是否相等，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-11-11
今天小编就为大家分享一篇浅谈layer弹出层按钮颜色修改方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了原生js拖拽实现图形的伸缩效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
本文主要对html5 canvas的使用进行了详细的介绍。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
垃圾回收机制和内存泄漏是JavaScript面试时常常问到的问题，这篇文章就为大家详细整理了他们的相关知识，感兴趣的小伙伴可以跟随小编一起了解一下2023-05-05
本文通过实例代码给大家介绍了ES6中的Promise，感兴趣的朋友参考下吧2017-10-10
最新评论