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＆amp;来设置位置。 style.left很简单，我遇到的问题是可以使用“bottom”或“right”定位元素。如果没有设置尺寸，容器会增长，而不是在设置顶部和左侧属性时移动。

我想我明白了这个问题。让我们说样式指定了一个底部和左侧位置，我使用javascript更新了顶部和左侧属性，顶部和左侧属性设置，但样式指定了一个底部属性。

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

这是解释问题的小提琴：fiddle

Answer 1

你可以这样做：

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

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

有关示例，请参阅此fiddle。单击一次移动它，再次单击应将其移回原始位置。

Answer 2

Demo

另外两方需要以下代码

this.style.bottom = "auto";
this.style.right = "auto";

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

2 个答案:

Demo