使用setAttribute()改变网页中标签的onclick属性

新一篇: 随鼠标浮动的层，style.left属性赋值问题 | 旧一篇: js向下拉列表的末尾添加一个 "nami" 选项

2、setAttribute()的差异我们经常需要在JavaScript中给Element动态添加各种属性，这可以通过使用setAttribute()来实现，这就涉及到了浏览器的兼容性问题。
var bar = document.getElementById("foo");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");
这里利用setAttribute指定e的onclick属性，简单，很好理解。
但是IE不支持， IE并不是不支持setAttribute这个函数，而是不支持用setAttribute设置某些属性，例如对象属性、集合属性、事件属性，也就是说用setAttribute设置style和onclick这些属性在IE中是行不通的。
为达到兼容各种浏览器的效果，可以用点符号法来设置Element的对象属性、集合属性和事件属性。document.getElementById("foo").onclick= function () { alert("This is a test!"); }

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
     < title > 无标题页 </ title >
     < script  type ="text/javascript" > ...
    function cancleEvent()
    ...{
    document.getElementById('a').setAttribute("onclick",'');
    document.getElementById('g').innerHTML="取消事件！";
    }
    function setEvent()
    ...{

    document.getElementById('a').setAttribute("onclick",'alert("你好！")');//firefox
    
    document.getElementById('a').onclick= function () ...{ alert("This is a test!"); }//IE firefox也有作用,但是使用firebug调试看不到修改后的效果，使用上面的方法可以看到。
    
    document.getElementById('Div1').innerHTML="设置事件！";
    }
     </ script >
</ head >
< body >
     < div  style ="width: 791px; height: 100px" >
         < div  id ="a"  name ="a"  style ="width: 108px; height: 30px; background-color: #ffccff"  onclick ="alert('你好！');" >
     </ div >
     &nbsp;
     < div  id ="g"  style ="width: 361px; height: 58px; background-color: #00ff00"  onclick ="cancleEvent();" > 取消
     </ div >
     < br  />
     < div  id ="Div1"  style ="width: 361px; height: 58px; background-color: #00ff00"  onclick ="setEvent();" > 设置
     </ div >

</ body >
</ html >