javascript - 使用 Javascript 移动使用 CSS Top Bottom Left Right 定位的元素

Question

我有一个没有任何固定尺寸的容器。我希望容器的大小由它的内容决定。像这样:

    #containerTL{
    position:absolute;
    bottom: 0px;
    right: 0px;
    margin: 5px;
    border: 1px solid black;
    cursor: default;    
    }

    #content{
    position:relative;
    background: gray;
    margin: 0px;
    top: 0px;
    height: 100px;
    width: 120px;
    cursor: default;    
    }

    <div id="containerTL"><div id="content"></div></div>

我还想移动容器的位置，让它的内容随行。通过修改容器 style.top 和 style.left 来设置位置很容易，我遇到的问题是元素可能使用“bottom”或“right”定位。如果没有设置尺寸，容器会增长，而不是在我设置 top 和 left 属性时移动。

我想我理解了这个问题。假设样式指定了底部和左侧位置，我使用 javascript 更新了顶部和左侧属性，设置了顶部和左侧属性，但样式指定了底部属性。

我想我总是可以在更新顶部和左侧后将底部和右侧属性设置为“自动”...但是如果我希望能够将每个元素发送回其原始位置，一般来说，无需编写每个元素的特殊情况。

这里有一个 fiddle 来说明这个问题:fiddle

Answer 1

你可以这样做:

this.style.right = '';
this.style.left = '';
this.style.top = '';
this.style.bottom = '';

它会取消你通过 .style 设置的任何设置，并恢复到你在样式表中定义的内容。

查看此 fiddle举个例子。单击一次移动它，再次单击应将其移回原始位置。