首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

js 与div 鼠标拖动div 为啥div的样式放到css文件里面就拖动不了解决思路

2012-03-14 
js 与div 鼠标拖动div 为啥div的样式放到css文件里面就拖动不了!DOCTYPE html PUBLIC -//W3C//DTD XHTML

js 与div 鼠标拖动div 为啥div的样式放到css文件里面就拖动不了
<!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=utf-8" />
  <style type="text/css">
<!--
.all
{position: absolute; width: 216px; height: 138px; background-color: skyblue;font-size: 12px; top: 210px; left: 180px; z-index: 101; border: solid 1px blue;
}
.top{background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 12px; padding-top: 5px; padding-left: 10px;}
-->
</style>
  <title>qq917722613</title>
  </head>
  <body>
  <div id="f" style="" class="all">
  <div id="title" style="" class="top">这是标题</div>
  这是内容</div>
  <script type="text/javascript">
  var posX;
  var posY;
  fdiv = document.getElementById("f");
  document.getElementById("title").onmousedown=function(e)
  {
  if(!e) e = window.event; //IE
  posX = e.clientX - parseInt(fdiv.style.left);
  posY = e.clientY - parseInt(fdiv.style.top);
  document.onmousemove = mousemove;
  }
  document.onmouseup = function()
  {
  document.onmousemove = null;
  }
  function mousemove(ev)
  {
  if(ev==null) ev = window.event;//IE
  fdiv.style.left = (ev.clientX - posX) + "px";
  fdiv.style.top = (ev.clientY - posY) + "px";
  }
  </script>
  </body>
  </html>

当把样式放到<div style="此处">style后面的时候 运行页面就会成功,这是为啥呢。 。。

[解决办法]
得到样式要使用getComputedStyle currentStyle 等方法得到,不能直接fdiv.style.left

参见
http://blog.csdn.net/lslxdx/article/details/6433518

更多知识参见
http://www.baidu.com/baidu?wd=currentStyle+getComputedStyle+&tn=monline_dg

热点排行