JAVASCRIPT:让DIV在浏览器改变大小后依然居中


如题,下面代码是可以的但是加上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
标准就不行了,请高手帮助解决一下/不要说原理/只要一个HTML文件就行/谢谢(禁止灌水)<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<input type="button" value="sd" onclick="doThis();"/><br/> 
<div id="111" style="position:absolute;width:50px;height:50px;background-color:#FB430D;">
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input type="button" value="sd" onclick="doThis();"/>
<SCRIPT LANGUAGE="JavaScript">
function doThis(){
   var a = document.getElementById("111");
   a.style.left=(document.body.clientWidth/2-a.clientWidth/2)+"px";
   a.style.top=(document.body.scrollTop+document.body.clientHeight/2-a.clientHeight/2)+"px";
}
</SCRIPT> 
</body>
</html>

解决方案 »

  1.   


    window.resize = doThis();
      

  2.   


    错了。window.onresize = doThis();
      

  3.   


    <!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 "> 
    <body> 
    <input   type= "button "   value= "sd "   onclick= "doThis() "/> <br/>   
    <div   id= "111 "   style= "position:absolute;width:50px;height:50px;background-color:#FB430D; "> 
    </div> 
    <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> 
    <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> 
    <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> 
    <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> 
    <input   type= "button "   value= "sd "   onclick= "doThis();"/> 
    <SCRIPT LANGUAGE= "JavaScript"> 
    function doThis(){ 
          var   a   =   document.getElementById( "111 "); 
          a.style.left=(document.documentElement.clientWidth/2-a.clientWidth/2)+ "px "; 
          a.style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight/2-a.clientHeight/2)+ "px "; 
    } 
    </SCRIPT>   
    </body> 
    </html> 
      

  4.   

    在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代document.body,可以这样写
    例：
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    在javascript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例。
    例：
    var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
    这么写可以得到很好的兼容性。
      

  5.   

    我也碰到过 估计是自己CSS 用的不好   DIV 控制不好