拖动层效果，兼容IE和FF!第1/2页

复制代码代码如下:<!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> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <title>DoDi Chat v1.0 Beta</title> <style rel="stylesheet" type="text/css" media="all" />  </style> <script language="javascript" type="text/javascript">  </script> </head> <body> <div id="main" class="dragclass"> <div id="ChatHead"> <a href="#" onclick="ChatHidden();">-</a> <a href="#" onclick="ChatShow();">+</a> <a href="#" onclick="ChatClose();">x</a> </div> <div id="ChatBody"> <div id="ChatContent"></div> <div id="ChatBtn"> <form action="" name="chat" method="post"> <textarea name="ChatValue" rows="3" style="width:350px"></textarea> <input name="Submit" type="button" value="Chat" onclick="ChatSend(this.form);" /> </form> </div> </div> </div> </body> </html>一个拖动效果，根据论坛的一些帖子改的，但还有一些BUG一直没法解决，谁能帮我改改？当第一次拖动层时，层的位置会偏离很远。呃。。。这涉及到一个style的问题。。。在ie和firefox中，obj.style这个东西实际上只是取得元素中属性style中的值！如下例，你会发现style块中的属性一个都取不到！复制代码代码如下:<style> #test{width:100px;background-color:red;} </style> <script> window.onload=function(){ var t=document.getElementById('test') var ts=t.style; t.innerHTML= "t.style.width:"+ts.width+"<br />"+ "t.style.backgroundColor:"+ts.backgroundColor+"<br />"+ "t.style.color:"+ts.color+"<br />"+ "t.style.paddingLeft:"+ts.paddingLeft } </script> <body> <div id="test" style="color:yellow;padding-left:100px;"> </div> </body>看到了没？前两个style 为空，后两个才有值。如果是ie，问题很好解决，只要把style改成currentStyle即可。IE Only复制代码代码如下:<style> #test{width:100px;background-color:red;} </style> <script> window.onload=function(){ var t=document.getElementById('test') var ts=t.currentStyle; t.innerHTML= "t.style.width:"+ts.width+"<br />"+ "t.style.backgroundColor:"+ts.backgroundColor+"<br />"+ "t.style.color:"+ts.color+"<br />"+ "t.style.paddingLeft:"+ts.paddingLeft } </script> <body> <div id="test" style="color:yellow;padding-left:100px;"> </div> </body>FF only复制代码代码如下:<style> #test{width:100px;background-color:red;} </style> <script> window.onload=function(){ var t=document.getElementById('test') var ts=document.defaultView.getComputedStyle(t, null); t.innerHTML= "t.style.width:"+ts.width+"<br />"+ "t.style.backgroundColor:"+ts.backgroundColor+"<br />"+ "t.style.color:"+ts.color+"<br />"+ "t.style.paddingLeft:"+ts.paddingLeft } </script> <body> <div id="test" style="color:yellow;padding-left:100px;"> </div> </body>我绕了半天，你明白你的错误原因了吗？你的style全都是文档级style，而你试图获取left的时候，第一次获得的只是0,自然会把你的框给挪到边上去了。

　　推荐阅读

　　createElement和onclick

无忧脚本代码测试网页 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]>>>详细阅读

本文标题：拖动层效果，兼容IE和FF!第1/2页

地址：http://www.17bianji.com/kaifa2/JS/31338.html

1/2 1