0

我有一个我构建的函数（目前它是一种简单的骨骼），但是当它展开 onMouseOver 时我找不到如何移动对象，所以它不会移动页面上的其他对象，这可能吗？

function expandbox(x) {
    x.style.height = "100px";
    x.style.width = "100px";
}

function returnbox(x) {
    x.style.height = "80px";
    x.style.width = "80px";
}
4

2 回答 2

1

如果您想将元素保持在文档流中，请将其设置为并使用andposition: relative移动它，这将与元素开始的位置相关。topleft

我将使用您制作的相同类型的函数来演示：

function moveBox(x) {
    x.style.position = "relative";
    // move 20px down and 10px left from original position
    x.style.top = "20px";
    x.style.left = "-10px";
}

如果您想从文档流中删除该框（以下元素不会受到其存在的影响），请将其位置设置为absolute。顶部和左侧值将相对于其最近的定位祖先（或者<body>如果没有，我在下面的评论中假设）

function moveBox(x) {
    x.style.position = "absolute";
    // position box 20px from top of body
    x.style.top = "20px";
    // and 10px from the left
    x.style.left = "10px";
}

一个元素被认为是“定位的”，如果它的值不是static（默认，在这里阅读更多），所以如果你想控制绝对定位的元素相对于什么，你可以给一个容器元素position: relative

于 2013-04-16T10:51:39.600 回答
1

使元素位置在相对容器内相对，然后更改其尺寸。

确保给它更高的 z-index。
将其与 的left,right,top,bottom属性一起放置style。

于 2013-04-16T07:34:19.200 回答