Javascript:使矩形向上增长

Question

我正在尝试创建一个代码，当满足特定条件时，它会上升，如果不满足，它会回落。我认为最好的方法是反向增加高度和边距顶部，这样随着边距顶部减小，高度可以增加，从而产生条形图一直在上升的错觉。但是，条形图的顶部似乎卡住了，更改 margin-top 并没有改变任何东西。这是我的代码:

function progresMove() {
    if (playerMargin >= marginRange[0] && playerMargin <= marginRange[1]) {
        progressHeight += .75;
        progressMargin -= .75;
        progress.style.cssText = "margin-top: " + progressMargin + "px";
        progress.style.cssText = "height: " + progressHeight + "px";
    } else {
        progressHeight -= 1.5;
        progressMargin += 1.5;
        progress.style.cssText = "margin-top: " + progressMargin + "px";
        progress.style.cssText = "height: " + progressHeight + "px";
    }
}

此函数每 .05 秒调用一次，并作用于已创建的带有某些样式的 HTML 元素:

width: 24px;
    background-color: #64DD17;
    margin-left: 3px;
    display: block;

目前它所做的只是将矩形向下推。

此外，如果有区别的话，它在一个 div 内的一个 div 内。我试过 float 它们，将它们放在行内 block 中，并 overflow hidden ，但没有任何区别。

感谢您的帮助!

Answer 1

给父级 position: relative 和元素本身 position: absolute 和 bottom: 0。这样元素总是与父元素的底部对齐。但是你必须以某种方式指定父级的高度和宽度，否则如果子级绝对定位，它会崩溃。