Javascript 为什么我的div移动的值与JS中的值不同

在我的研究中，我也很少使用HTML、CSS、JS和JQuery

主要任务是移动大（红色）框和小（蓝色）框

它的工作原理应该是这样的：用户检查上部（bigbox）或下部（smallbox）收音机，以按他在文本输入（初始值为30px）中写入的像素数（使用位置：绝对）移动特定的方框

问题是盒子的移动速度应该精确到30px，但实际上正如您在控制台中看到的那样，它的移动速度是39px——任何输入值都会发生这种情况——盒子的移动速度应该不同，而且“速度”非常低例如，5px“右”和“左”按钮都将长方体向右移动，而“上下”按钮将长方体向下移动，甚至移动到长方体外部

我只和JS一起工作了一周，所以我对它真的很陌生，任何帮助都将非常感谢！如果我的代码很笨拙-对不起，我还不知道web代码应该看起来有多好，我还在努力

更新：丹尼普在评论部分回答了我。我要处理的问题是，我忘记了实际元素的边距也被添加到绝对位置。因此，最终的解决方案是将body margins设置为0，这样一切都能正常工作

函数parseSpeed（）{
变量速度=$（“#速度”）.val（）；
if（isNaN（速度））{
速度=0；
}否则{
速度=parseInt（速度，10）；
}
返回速度；
}
功能移动（如果可能）（方向）{
var-activeBox=document.getElementById（swapboxesifRequired（））；
var x=activeBox.getBoundingClientRect（）.left；
var y=activeBox.getBoundingClientRect（）.top；
console.log（activeBox.id+”：x:+x+，y:+y）；
var speed=parseSpeed（）；
var boxlimit=400；
if（activeBox.id==“smallbox”）{
boxlimit=370；
}否则{
boxlimit=340；
}
开关（方向）{
案例0：
如果（x-速度>=0）{
activeBox.style.left=（x-速度）+“px”；
}否则{
activeBox.style.left=0+“px”；
}
打破
案例1：
如果（x+速度=0）{
activeBox.style.top=（y-速度）+“px”；
}否则{
activeBox.style.top=0+“px”；
}
打破
案例3：
如果（y+speed）没有检查很多代码，我猜你是在取元素的偏移量，这是相对于窗口的，默认情况下，主体的
边距为8px
，加上容器上边框的
1px
，你就得到了“9px”抵消extra@DaniP听起来很合理。这也解释了为什么左上角的位置是（9，9）@DaniP谢谢，这就解释了第一个问题！有人知道为什么当我将速度设置为5 px时，左右两边都会将框向右移动吗？同样的解释……因为您要修改的
左
是相对于contianer的，但是您得到的偏移量是相对于窗口的。这样，if语句的计算就不是acc了尿酸盐。只需将主体边距设置为0，您将see@DaniP哇，谢谢-它确实像预期的那样工作。谢谢所有的帮助，我想我必须多读一些关于它的内容。