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.01、XHTML 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 回答