Javascript 为什么我最初需要在js中设置样式，而不是使用现有样式？_Javascript

Javascript 为什么我最初需要在js中设置样式，而不是使用现有样式？

javascript

Javascript 为什么我最初需要在js中设置样式，而不是使用现有样式？,javascript,Javascript,我正在学习如何用javascript在文档中拖放move DIV。这是一个现场演示：这在Firefox中运行良好，我目前没有使用任何其他浏览器进行开发。但是，如果将_js中的set_coords\u更改为false，演示将失败使用Firebug设置一些断点，您会注意到此行失败： var div_left = parseInt( mov_div_1.style.left, 10 ); 此时，mov_div_1.style.left没有值。因此javascript不知道现有值是什么，并将di

我正在学习如何用javascript在文档中拖放move DIV。这是一个现场演示：

这在Firefox中运行良好，我目前没有使用任何其他浏览器进行开发。但是，如果将_js中的

set_coords\u更改为false
，演示将失败
使用Firebug设置一些断点，您会注意到此行失败：
var div_left = parseInt( mov_div_1.style.left, 10 );

此时，mov_div_1.style.left
没有值。因此javascript不知道现有值是什么，并将div_left
设置为“NaN”。此样式已设置，并且在文档中似乎有效，但在DOM中没有任何值
如果将_js

中的设置为true，则上述内容有一个值，所有内容都能正常工作

为什么?

如果你想在本地玩这个，复制并粘贴到你的本地演示文件。要查看Firebug中的值（或缺少值），请在第39行或第40行设置断点，并将鼠标悬停在该行中的内容上，然后单步执行。确保将_js中的

set_coords_设置为false
以查看问题
拖动\u移动\u div.html
：
<!DOCTYPE html>
<html>
<head>
<title>drag move div demo</title>

<style type='text/css'>
.movDiv {
  position: absolute;
  left: 80px;
  top:  80px;
  cursor: move;
  border: 1px dashed green;
  padding: 1em;
}
.coordinates_display { font-weight: bold; }
</style>

<script type='text/javascript'>
window.onload = function() {
  mov_div_1 = document.getElementById('mov_div_1');
  set_coords_in_js = true;

  function update_coordinates( newX, newY ) {
    document.getElementById('coordinate_x').innerHTML = newX;
    document.getElementById('coordinate_y').innerHTML = newY;
  }

  // why do I need to set these here in javascript when they are set in css?
  if( set_coords_in_js ) {
    mov_div_1.style.left = '80px';
    mov_div_1.style.top  = '80px';
  }

  update_coordinates( mov_div_1.style.left, mov_div_1.style.top );

  mov_div_1.onmousedown = function(e){
    mov_div_1.style.backgroundColor = 'black';
    mov_div_1.style.color = 'white';
    var div_left = parseInt( mov_div_1.style.left, 10 );
    var div_top  = parseInt( mov_div_1.style.top,  10 );
    var startX   = e.clientX;
    var startY   = e.clientY;
    mov_div_1.onmousemove = function(e){
      var newX = ( div_left + e.clientX - startX );
      var newY = ( div_top  + e.clientY - startY );
      mov_div_1.style.left = newX + 'px';
      mov_div_1.style.top  = newY + 'px';
      update_coordinates( mov_div_1.style.left, mov_div_1.style.top );
    };
  };

  mov_div_1.onmouseup = function(){
    mov_div_1.onmousemove = null;
    mov_div_1.style.backgroundColor = '';
    mov_div_1.style.color = '';
  };

};
</script>

</head>
<body>

<div class='movDiv' id='mov_div_1'>[ Click &amp; Drag Me Around (slowly) ]</div>

<p>Coordinates:
<span id='coordinate_x' class='coordinates_display'></span> x
<span id='coordinate_y' class='coordinates_display'></span></p>

</body>
</html>


拖动移动div演示
莫夫迪夫先生{
位置：绝对位置；
左：80px；
顶部：80px；
光标：移动；
边框：1px绿色虚线；
填充：1em；
}
.coordinates_display{font-weight:bold；}
window.onload=函数（）{
mov_div_1=document.getElementById（'mov_div_1'）；
设置_coords_in_js=true；
函数更新_坐标（newX，newY）{
document.getElementById（'coordinate_x'）。innerHTML=newX；
document.getElementById（'coordinate_y'）。innerHTML=newY；
}
//在css中设置这些内容时，为什么需要在javascript中设置它们？
if（在js中设置坐标）{
mov_div_1.style.left='80px'；
mov_div_1.style.top='80px'；
}
更新_坐标（mov_div_1.style.left，mov_div_1.style.top）；
mov_div_1.onmousedown=函数（e）{
mov_div_1.style.backgroundColor='黑色'；
mov_div_1.style.color='白色'；
var div_left=parseInt（mov_div_1.style.left，10）；
var div_top=parseInt（mov_div_1.style.top，10）；
var startX=e.clientX；
var startY=e.clientY；
mov_div_1.onmousemove=函数（e）{
var newX=（div_left+e.clientX-startX）；
var newY=（div_top+e.clientY-startY）；
mov_div_1.style.left=newX+'px'；
mov_div_1.style.top=newY+'px'；
更新_坐标（mov_div_1.style.left，mov_div_1.style.top）；
};
};
mov_div_1.onmouseup=函数（）{
mov_div_1.onmousemove=null；
mov_div_1.style.backgroundColor=''；
mov_div_1.style.color=''；
};
};
[单击并拖动我（慢慢地）]
坐标：
x

请参阅。当您访问元素.style
时，您不是在访问计算样式（包括样式表声明），而是在访问元素本身的“style”属性。因此，当您尝试从mov_div_1.style
获取值时，没有可用的样式属性，它将作为空字符串返回
要解决此问题，您需要使用element.currentStyle
（我认为是较旧的IE版本）或element.getComputedStyle（）
（现代浏览器）：

var computedStyle = mov_div_1.currentStyle || getComputedStyle(mov_div_1);
var div_left = parseInt( computedStyle.left, 10 );
var div_top  = parseInt( computedStyle.top,  10 );