0

我正在尝试调整 div onload 的大小,而标题中没有 javascript 函数。到目前为止,我的代码看起来像下面的代码,虽然我对 javascript 有点熟悉,但我还是个初学者。

我想要做的是在样式表中设置一个高度为 100% 的 div,并在加载时减去 60px 的高度。我什至接近,还是我迷路了?

编辑:我不会反对这样做的其他方法。我只是不知道有什么其他方法。

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

5 回答 5

5

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

这是我认为您正在尝试实现的编码示例:

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


如果您以前没有使用过 jQuery,请确保在您的网页源代码中的任何其他 JavaScript 之前包含它:

包含 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
于 2012-05-08T02:37:43.690 回答
1

你可能想要这样的东西:

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

编辑:

忘了提一下,你不能对 DIV 元素进行加载,只能在主体上进行加载。所以如果你坚持以这种方式运行你的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>

总结一下:

  • 无法加载任何内容,但正文请参阅:如何将 onload 事件添加到 div 元素?
  • 从 document.body 中获取 clientHeight。它不是一个全球性的财产。
  • 如果您使用的是 onclick 之类的东西,则可以使用“this”引用目标对象,但不能像使用 document.this 那样引用目标对象。那是无效的。
于 2012-05-08T02:26:19.127 回答
1

首先,HTML 4.01XHTML 1.0 DTD 和HTML5 Specs 没有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>
于 2012-05-08T03:07:34.517 回答
0

jsFiddle 示例


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

  1. div没有onload属性(你必须使用body
  2. 即使这确实有效,之后也可能会填充其他内容,因此最好将其应用于 dom 就绪以及窗口调整大小事件
  3. 而不是clientHeight你可能想要scrollHeight使用body
于 2012-05-08T02:58:48.947 回答
0

尝试这样的事情:

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

我相信这应该有效。

于 2012-05-08T02:25:24.400 回答