使用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（＆＃39; divHeight＆＃39;）也没有为我做任何事情！

Answer 1

你正确地以高度计算身高。但是，为了设置高度，您需要为该值添加维度（例如px）。

您不需要执行parseInt，因为window.innerWidth是typeof number的属性。

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

Answer 2

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

#demoDiv {
  height: 16vw;
}

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