javascript - Javascript:使矩形向上增长

我正在尝试创建一个代码，该代码在满足特定条件时会增加小节，如果没有，则回落。我认为最好的方法是相反地增加高度和边距顶部，以便随着边距顶部减小，高度可以增加，从而产生一种幻想，就是柱仅在不断上升。但是，似乎条形图的顶部被卡住了，更改边距顶部并没有任何改变。这是我的代码：

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";
    }
}

该函数每0.05秒调用一次，并以某些样式作用于已创建的HTML元素：

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

目前，它所要做的就是将矩形向下推。

另外，如果有区别，它位于div内的div内。我试过浮动它们，将它们放在行内块中，并隐藏了溢出，但这没有什么区别。

谢谢您的帮助！

最佳答案

给出父级position: relative以及元素本身position: absolute和bottom: 0。这样，元素始终与父对象的底部对齐。但是您必须以某种方式指定父级的高度和宽度，否则如果绝对放置子级，它将崩溃。