Question

对于某些人来说，这可能是一个非常愚蠢的问题，但我当然无法理解这背后的问题。代码非常简单，如下所示：

HTML：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>####</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body onload="resizeDiv();">    
        <div id="testElement">ABCD</div>
        <div id="secElement">ABC</div>
        <script type="text/javascript" src="javascript.js"></script>
    </body>
</html>

CSS：

html , body{
    height:100%;
}
#testElement{
    background-color:black;
    color:white;
}
#secElement{
    font-size:50px;
}

JS：

(function immediate(){
    document.getElementById('secElement').textContent = window.innerHeight;
}());
function resizeDiv(){
    document.getElementById('testElement').style.height = (window.innerHeight - 50) * 0.9;
}

现在，通过此代码，div与id＆＃39; testElement＆＃39;应该有一个高度为window.innerHeight - 20的90％。但是，似乎没有任何效果。请帮忙。

Answer 1

body代码已将onload处理程序分配给resizeDiv()，但您的脚本位于页面底部，因此onload处理程序无法引用它。

Answer 2

使用document.getElementById('testElement').setAttribute("style","height:" + (window.innerHeight - 50) * 0.9) + ' px';您可以在此处找到更多解释原因：Setting DIV width and height in JavaScript

Answer 3

添加“px”： document.getElementById（'testElement'）。style.height = （window.innerHeight - 50）* 0.9 +“px”;

设置相对于`window.innerHeight`的高度不起作用

3 个答案: