javascript - 在 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

您正在以正确的方式计算高度。但是为了设置高度，您需要为该值添加尺寸(比如 px)。

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

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