修改元素ID的问题

今天在IE里突然碰到一个问题 ：
 <html>
<head>
<style type="text/css">
#s,#div{
position:relative;

}
  #ons{
position:absolute;
display:none;
}

#one1{
border:1px solid red;
width:100px;
height:100px;
position:absolute;
top:0px;
display:block;
}
</style>
</head>
<body>
<div id='s' onmouseover="this.id='div';
document.getElementById('ons').id='one1';">asd
<div id="ons" onclick="alert(this.id)">xaf</div>
a
</div>
a
</body>
</html>
如果把this.id='div';去掉的话  IE就不会显示xaf  FF会显示  但是加上this.id='...'（this.className='...'）随便写点东西都行就会显示
这就奇怪了 为什么非要加上那句才会有效果呢；
谁能解释下上面出现的情况--------：：

解决方案 »

  1.   

    因为你前面的ＳＴＹＬＥ里面
    #s,#div{    /////这里有#div
    position:relative;
    }
    另外，学习要学习些有用的。这种修改ＩＤ的事情，在实际开发中不但是没用的，而且一般都是非常忌讳的，因为这会使东西变得非常乱套。
      

  2.   

    因为语句出错了，js就不会继续执行，一般不建议修改id
      

  3.   

    不知有啥作用<html>
    <head>
    <style type="text/css">
    #s,#div{
    position:relative;}
    #ons{
    position:absolute;
    }#one1{
    border:1px solid red;
    width:100px;
    height:100px;
    position:absolute;
    top:100px;
    display:block;
    }
    </style>
    </head>
    <body>
    <div id='s' onmouseover="javascript:document.getElementById('ons').id='one1';">asd
    <div id="ons" onclick="alert(this.id)">xaf</div>
    a
    </div>
    a
    </body>
    </html>