JavaScript通过X px按按钮移动对象

我应该如何通过按钮（在本例中）以10px的速度移动对象？在我的代码中，右下按钮不起作用，向上和向左移动图像，但不能以10px的速度移动到上/左边缘。

---

我试过这样做：

第一件事是您的图片没有定位，这意味着默认情况下它是定位的

静态的

，因此您不能使用左、右、上或下样式属性。我已经将父母的位置设置为相对，孩子的（img）位置设置为绝对，这样图像的位置将相对于父母（你的身体）

我认为您还希望在每次单击按钮时执行增量赋值，在这种情况下，您应该首先获得图像的当前位置。您可以使用

offsetTop

和

offsetLeft

属性来实现这一点

正文{
位置：相对位置；
}
img{
位置：绝对位置；
左：200px；
顶部：100px；
}

左边
正确的
向下
向上的
函数moveleft（）{
const img=document.getElementById（'inspo'）；
img.style.left=`${img.offsetLeft-10}px`；
}
函数moveright（）{
const img=document.getElementById（'inspo'）；
img.style.left=`${img.offsetLeft+10}px`；
}
函数moveup（）{
const img=document.getElementById（'inspo'）；
img.style.top=`${img.offsetTop-10}px`；
}
函数movedown（）{
const img=document.getElementById（'inspo'）；
img.style.top=`${img.offsetTop+10}px`；
}
函数A（）{
document.getElementById（'inspo'）.style.display=“无”；
}

以下是一段代码片段：

网页设计
div{
宽度：100px；
高度：75px；
背景色：红色；
边框：1px纯黑；
}
#第二组{
变换：旋转（30度）；
-ms变换：旋转（30度）；
/*IE 9*/
-moz变换：旋转（30度）；
/*火狐*/
-webkit变换：旋转（30度）；
/*狩猎与铬*/
-o变换：旋转（30度）；
/*歌剧院*/
背景颜色：黄色；
}
正常
左边
正确的
向下
向上的
var topNum=0，
leftNum=0；
函数moveleft（）{
leftNum-=10；
document.getElementById（'inspo'）.style.marginLeft=leftNum+'px'；
}
函数moveright（）{
leftNum+=10；
document.getElementById（'inspo'）.style.marginLeft=leftNum+'px'；
}
函数moveup（）{
topNum-=10；
document.getElementById（'inspo'）.style.marginTop=topNum+'px'；
}
函数movedown（）{
topNum+=10；
document.getElementById（'inspo'）.style.marginTop=topNum+'px'；
}
函数A（）{
document.getElementById（'inspo'）.style.display=“无”；
}

Hi Pololo，您是要将对象从元素的原始位置移动10像素，还是从屏幕左侧移动10像素？Hi@Ivan，谢谢您的回复。我试图将其从原始位置移动（在样式中指定，对象位置是绝对的），如果单击几下，我希望它从移动的位置移动before@PoloOlo，你原来的问题更具描述性，还包括你尝试过的内容。但是这种类型的问题在SO中不受鼓励，所以我建议你重新发布你的原始问题，或者在这里包括你尝试过的内容。