Question

我已经浏览了Stack Overflow网站的HTML部分中的第5,625个问题。我没有发现任何与我的特定问题相符的问题。

我有一个按钮，我使用绝对定位放在网页上。我需要动态地将该按钮移动到另一个位置。例如，让我们来看看最初的x＆amp;按钮的y坐标是8＆amp; 16，在这种情况下，我需要移动它来说x＆amp; y 64＆amp;的坐标128。

我可以通过这样做找到按钮的位置：

the_Old_Button_X_Offset = document.getElementById 
(theButtonID).offsetParent.offsetLeft;

the_Old_Button_Y_Offset = document.getElementById
 (theButtonID).offsetParent.offsetTop ;

这会给我x＆amp; y坐标为8＆amp; 16.但是当我尝试重置x＆amp; y按钮的坐标：

document.getElementById (theButtonID).offsetParent.offsetLeft = 64;
document.getElementById (theButtonID).offsetParent.offsetTop  = 128;

“offsetParent.offsetLeft”＆amp;的值“offsetParent.offsetLeft”仍然是8＆amp; 16＆amp;不是64＆amp;很显然，我做错了什么。我不理解我应该理解的东西。

那么我做错了什么？我错过了什么？最重要的是，如何动态地将按钮从网页上的1个位置移动到另一个位置。

感谢您的所有帮助＆amp;建议。

Answer 1

我假设您使用此CSS设置初始位置：

#theButtonID {
    left:8px;
    top:16px;
}

嗯，你所要做的就是设置：

with(document.getElementById(theButtonID).style) {
    left = "64px";
    top = "128px";
}

请注意，如果您想要平稳移动，请将此CSS添加到按钮：

transition:top 1s ease, left 1s ease;
-webkit-transition:top 1s ease, left 1s ease;

Answer 2

您可以将新位置添加到班级：

.class {top:100; left:100;}

然后通过javascript动态添加该类：

elem.className = "class";

或者您可以直接设置顶部/左侧（或底部/右侧，顶部/右侧或底部/左侧）的内联样式属性

elem.setAttribute('style', 'top:100px;left:150px;');

或者你可以使用 elem.style ，无论你喜欢什么。

elem 是绝对定位元素

如何动态移动HTML页面上的按钮？

2 个答案: