使用JavaScript中的变量更改CSS中的高度

Question

所以我试图让我的DIV的高度响应窗口的宽度。代码：

var w = window.innerWidth;
var mathW = parseInt(w);
var divHeight = mathW*0.16;
document.getElementById('demoDiv').style.height = divHeight;

CSS是：

#demoDiv {
   margin: auto;
   background-color: red;
   width: 100%;
   height: 50px; //just to start with SOMETHING
}

显然我遇到了麻烦！我玩过它并且如果我只使用常规整数肯定可以改变高度，但即使使用parseInt（'divHeight'）也没有为我做任何事情！

Answer 1

您正在以正确的方式计算高度。但是为了设置高度，你需要为值添加维度（比如qazxsw poi）。

你不需要做px因为parseInt是window.innerWidth类型的财产。

number

Answer 2

什么阻止你应用纯CSS解决方案？

var w = window.innerWidth;
var divHeight = mathW*0.16;
document.getElementById('demoDiv').style.height = divHeight+"px";

不需要Javascript，更短，执行速度更快，并且在窗口大小更改时无需应用任何调整大小处理程序。