1

我已经完成了 Stack Overflow 网站 HTML 部分的第 5,625 个问题，但没有找到任何与我的特定问题相匹配的问题。

我有一个使用绝对定位放置在网页上的按钮。我需要将该按钮动态移动到另一个位置。因此，例如让我们将按钮的初始 x 和 y 坐标设为 8 和 16，在这种情况下，我需要将其移动到 x 和 y 坐标为 64 和 128 的位置。

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

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

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

这会给我 8 和 16 的 x 和 y 坐标。但是当我尝试通过这样做来重置按钮的 x 和 y 坐标时：

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

“offsetParent.offsetLeft”和“offsetParent.offsetLeft”的值仍然是 8 和 16 而不是 64 和 128。所以很明显，我都做错了，我不理解我应该理解的东西。

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

感谢您的所有帮助和建议。

4

2 回答 2

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;
于 2013-04-28T02:28:11.217 回答
0

您可以将新位置添加到类中：

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

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

elem.className = "class";

或者直接设置top/left（或者bottom/right，或者top/right，或者bottom/left）的内联样式属性

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

或者您可以使用elem.style，无论您喜欢哪个。

elem 是绝对定位元素

于 2013-04-28T02:43:33.800 回答