如何用JavaScript实现根据输入值动态修改div高度以展示楼层数

问题描述 #

我想要让div高度随输入值变化，以此来表示楼层数。我不太明白如何让脚本变量代表实际值，因为如果我将document.getElementById("height_representation_floors").setAttribute("style","height: height_floor ");改成比如500px这样的固定值，就能正常工作。请问我该怎么做？

现有代码 #

HTML #

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       
    </head>
<body>
<div id="house_2">

    <div id="output" style="height: 5vh; width: 60vw; margin: 2vw; ">
    </div>

    <h1 style="position: absolute; left: 2vw; top: 8vh; text-align: left; font: small-caps bold 24px/1 sans-serif;"> Input wanted height: </h1>

    <input type="number" step="any" id="height_input" style="position: absolute; margin: 2vw; top: 8vh; text-align: left; width: 60vw; height: 5vh; font-size: 2vw; border: solid 2px black;">

    <div id="button_1">
    <button type="button" onClick="calculus_meters()" style="width: 14.6vh; height: 14.6vh; border: solid 2px black; font-size: 1.5vw">Convert (in meters)</button>
    </div>

    <div id="button_2">
    <button type="button" onClick="calculus_feet()" style="width: 14.6vh; height: 14.6vh; border: solid 2px black; font-size: 1.5vw">Convert (in feet)</button>
    </div>

    <div id="height_representation_floors">
    </div>
</div>
</body>
</html>

CSS #

body {  
    margin: 0;
    background: #595959;
    height: 100%;
    overflow-x: hidden;
}
#output {
    position: absolute;
    font: small-caps bold 24px/1 sans-serif;
    background: white;
    border: solid 2px black;
}
#button_1 {
    position: absolute;
    top: 3vh; 
    left: 62vw;
}
#button_2 {
    position: absolute;
    top: 3vh; 
    left: 69.7vw;
}
#height_representation_floors {
    position: absolute;
    top: 20vh;
    height: 1100px;
    width: 500px;
    background-image: url(images/height_representation.png);
}
#height_representation_stickman {
    position: absolute;
}

JavaScript #

function calculus_meters() {
    height_floor = 0
    height_input_code_meters = document.getElementById("height_input").value
    height_floor = height_input_code_meters / 2.7
    document.getElementById("height_representation_floors").setAttribute("style","height: height_floor ");
    document.getElementById("output").textContent = height_input_code_meters + ' meters of height is approximately ' + height_floor.toFixed(0) + ' floors of a regular living building'
}
function calculus_feet() {
    height_floor = 0
    height_input_code_feet = document.getElementById("height_input").value
    height_floor = height_input_code_feet / 8.86
    document.getElementById("output").textContent = height_input_code_feet + ' feet of height is approximately ' + height_floor.toFixed(0) + ' floors of a regular living building'
}

问题原因 #

1. 直接把变量名height_floor写在字符串里，浏览器会将其视为普通文本，不会读取变量的实际值。
2. CSS的height属性必须带单位（如px），当前代码未添加单位，即便变量生效也无法正确渲染。
3. calculus_feet函数缺少设置div高度的逻辑，切换到英尺计算时高度不会变化。

修复方案 #

直接修改元素的style.height属性，将变量值与单位拼接后赋值即可，这种方式比setAttribute更直观且不易出错。同时补全calculus_feet函数的高度设置逻辑。

修改后的JavaScript代码 #

function calculus_meters() {
    let height_input_code_meters = document.getElementById("height_input").value;
    let height_floor = height_input_code_meters / 2.7;
    // 拼接变量值与单位，直接设置高度
    document.getElementById("height_representation_floors").style.height = `${height_floor * 100}px`;
    document.getElementById("output").textContent = `${height_input_code_meters} meters of height is approximately ${height_floor.toFixed(0)} floors of a regular living building`;
}
function calculus_feet() {
    let height_input_code_feet = document.getElementById("height_input").value;
    let height_floor = height_input_code_feet / 8.86;
    // 补全英尺计算时的高度设置
    document.getElementById("height_representation_floors").style.height = `${height_floor * 100}px`;
    document.getElementById("output").textContent = `${height_input_code_feet} feet of height is approximately ${height_floor.toFixed(0)} floors of a regular living building`;
}

注：这里给height_floor乘以100是为了让高度变化更明显，你可以根据实际需求调整这个比例，比如1层对应50px就乘以50。

内容的提问来源于stack exchange，提问作者Simpractor