Question

我试图在标题中没有javascript函数的情况下调整div onload的大小。到目前为止，我的代码看起来像下面的代码，虽然我对javascript有点熟悉，但我非常喜欢初学者。

我想要做的是在样式表中设置高度为100％的div，并在加载时减去60px的高度。我甚至关闭了，还是我迷路了？

编辑：我不会反对其他方法。我只是不知道其他任何方式。

<div id="pageContent" onload="document.this.style.height = clientHeight - '60px';">

Answer 1

我使用过jQuery，因为检测窗口高度容易出现跨浏览器兼容性问题。保持标记，CSS样式和JavaScript功能的清晰分离是一种很好的做法。

以下是我认为您要实现的目标的编码示例：

http://jsfiddle.net/AKmaB/2/

如果您之前没有使用过jQuery，请确保在网页源代码中的任何其他JavaScripts之前包含此内容：

包含jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Answer 2

你想要这样的事情：

this.style.height = (document.body.clientHeight - 60) + "px";

编辑：

忘了提，你不能对DIV元素进行onload，只能在body上进行。因此，如果你坚持以这种方式运行你的javascript，你可以这样做......

<html>
<head></head>
<body style="height:100%; background:blue;" onload="document.getElementById('pageContent').style.height = (document.body.clientHeight - 60) + 'px';">
<div style="background:green;" id="pageContent">FOO</div>
</div>
</body>
</html>

总结：

无法上传任何内容，但正文请参阅：How to add onload event to a div element?
从document.body获取clientHeight。它不是一个全球性的财产。
如果你使用像onclick这样的东西，你可以使用'this'来引用目标对象，但不是像document.this那样使用它。那是无效的。

Answer 3

首先，HTML 4.01，XHTML 1.0 DTD和HTML5规范没有为onload元素定义div属性事件，所以这不是一个好主意这样做。

为了使代码有效，必须在尝试修改的元素已经加载到DOM中之后运行它。有一些方法可以实现这一点，例如，在div声明之后：

<div id="pageContent"></div>
<script>document.getElementById('pageContent').style.height = 
        (self.innerHeight ? self.innerHeight :
         document.documentElement.clientHeight ? document.documentElement.clienteHeight :
        document.body.clientHeight) - 60 + "px";</script>

或在</body>标记之前。

<script>document.getElementById('pageContent').style.height = 
        (self.innerHeight ? self.innerHeight :
         document.documentElement.clientHeight ? document.documentElement.clienteHeight :
        document.body.clientHeight) - 60 + "px";</script>
</body>

Answer 4

尝试这样的事情：

<div id="pageContent" onload="this.style.height = (document.body.clientHeight-60)+'px'">

我相信这应该有效。

Answer 5

jsFiddle Example

<body onload="document.getElementById('pageContent').style.height = 
              parseFloat(document.body.scrollHeight)-60 + 'px';">
<div id="pageContent"></div>

div没有onload属性（您必须使用body）
即使这确实有效，也可以在之后用其他东西填充身体，所以最好将它应用于dom ready，以及窗口调整大小事件
而不是clientHeight您可能希望使用scrollHeight

body

使用onload调整div的大小

5 个答案: