javascript - 如何根据另一个元素随机生成的高度设置 css 元素的高度？

Question

我试图在两堵“墙”之间创建 100 像素的一致间隙，一堵位于屏幕顶部“wallTop”，另一堵位于屏幕底部“wallBot”，就像《Flappy Bird》中的那样。我在“wallTop”上使用了 Math.random 来随机化它的高度，以便随机化间隙的位置，但是如何将“wallBot”的高度设置为基于“wallTop”的随机高度？

这是我尝试过的

var wallGap = 100;
var wallTop = document.getElementById("wallTop");
var constant= (wallTop.height+wallGap);

$("#wallTop").css("height",Math.round(Math.random()*150+70)+"px");
$("#wallBot").css("height",450-constant+"px");

“450”是整个容器的高度，所以我试图找到减去“wallTop”和“wallGap”后的余数，这将是“wallBot”的高度。

Answer 1

在为 wallTop 设置新高度后，您的constant 不会神奇地改变(另请注意，wallTop.height 将是 未定义，因为该元素没有属性height)。

    var wallGap = 100;
    var wallSpace = 450 - wallGap;
    var wallTop = $("#wallTop");
    var wallBot = $("#wallBot");

    wallTop.height(Math.round(Math.random()*150+70));
    wallBot.height(wallSpace - wallTop.height());