中有什么区别

发布于
2017-09-06

这一段代码直接放到网页上运行，div是无法拖动的，但是如果把#div的样式，内联在div标签中，就可以拖动了，这是为什么？（<div class="a" id="div" style="left:500px;top:100px;"></div>）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现拖动div块</title>
<style>
    #div{
        width: 500px;
        height: 300px;
        border: 2px solid #ccc; 
        position: absolute; 
    }
</style>
</head>
<body>
    <div class="a" id="div"></div>
    <script type="text/javascript">
    var px,py;
    var div = document.getElementById('div');
    div.onmousedown = function(e) {
        var e = e || window.event;
        px = e.clientX - parseInt(div.style.left);
        py = e.clientY - parseInt(div.style.top);
        div.onmousemove = mousemove;
    }
    div.onmouseup = function(){
        div.onmousemove = null;
    }
    function mousemove(e){
        var e = e || window.event;
        div.style.left = (e.clientX-px)+'px';
        div.style.top = (e.clientY-py)+'px';
        
    }
    </script>
</body>
</html>

css 前端 web html

阅读 13.3k

4 个回答

✓ 已被采纳

js只能改变行内样式。你的获取方式不对

px = e.clientX - div.offsetLeft;
py = e.clientY -  div.offsetTop;

hujiulong

2.5k1710

发布于
2017-09-06

写css的话，样式不会直接更新到div的style中的

px = e.clientX - parseInt(div.style.left);
py = e.clientY - parseInt(div.style.top);

也就是说这一步是获取不到div.style.left和div.style.top的

应该改成这样

var style = window.getComputedStyle(div, null);
px = e.clientX - parseInt(style.left);
py = e.clientY - parseInt(style.top);

陌路凡歌

7.9k21119

发布于
2017-09-06

更新于
2017-09-06

div.style.left这个只能获取写在div中的行间样式，getComputedStyle才能获取写在style中的样式，准确来说应该是计算后的样式，试试改成下面的代码

   px = e.clientX - parseInt(getElementStyle(div,'left'));
   py = e.clientY - parseInt(getElementStyle(div,'top'));
function getElementStyle(obj,attr){
　　if(obj.currentStyle){   //ie
　　　　return obj.currentStyle[attr];
　　}else{                   //其他 
　　　return getComputedStyle(obj,false)[attr];   //第二个参数是伪类
　　}
}