zoukankan      html  css  js  c++  java
  • 仅IE支持clearAttributes/mergeAttributes方法

    仅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

  • 相关阅读:
    Redhat7 安装 yum源(亲测有效)
    Win10开启FTP与配置(完整无错版)
    DataStage中Transformer的函数大全
    缺省值是什么
    扫描线
    2021.07.02笔记-DP
    2021.07.02-2膜你赛
    2021.07.01膜你赛
    2021.06.21模拟赛
    2021.06.09模拟赛
  • 原文地址:https://www.cnblogs.com/snandy/p/2473057.html
Copyright © 2011-2022 走看看