Question

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

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内。我试过浮动它们，将它们放在行内块中，并隐藏了溢出，但这没什么不同。

感谢您的帮助！

Answer 1

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

Answer 2

替换cssText：

progress.style.cssText = "margin-top: " + progressMargin + "px";
progress.style.cssText = "height: " + progressHeight + "px";

具有：

progress.style.marginTop = progressMargin + "px";
progress.style.height = progressHeight + "px";

说明：

您正在覆盖cssText的值，因此在函数结尾没有margin-top的规则。

考虑以下代码段：

div1.style.cssText = "color: red";
div1.style.cssText = "background-color: yellow";

div2.style.cssText = "color: yellow";
div2.style.cssText += ";background-color: red";

div3.style.color = "red";
div3.style.backgroundColor = "yellow";

<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>

第一个div的背景变为黄色，但文本仍为黑色。在第二和第三div中都应用了

Javascript：使矩形向上增长

2 个答案:

说明：