javascript 使用 onload 调整 div 的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10491690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
resize a div using onload
提问by BrettAdamsGA
I am trying to resize a div onload without having a javascript function in the header. So far my code looks like the code below, and while I am somewhat familiar with javascript, I am very much so a beginner.
我正在尝试在标题中没有 javascript 函数的情况下调整 div 的大小。到目前为止，我的代码看起来像下面的代码，虽然我对 javascript 有点熟悉，但我还是个初学者。
What I am wanting to do is take a div that has a height set in the stylesheet of 100%, and subtract 60px of height on load. Am I even close, or am I lost?
我想要做的是在样式表中设置一个高度为 100% 的 div，并在加载时减去 60px 的高度。我什至接近，还是我迷路了？
EDIT: I would not be opposed to other methods of doing this. I just don't know of any other way.
编辑：我不会反对这样做的其他方法。我只是不知道任何其他方式。
<div id="pageContent" onload="document.this.style.height = clientHeight - '60px';">
回答by Hyman
I have used jQuery, as detecting window height is prone to cross-browser compatability issues. It is good practice to keep clear seperation of markup, css style, and JavaScript functionality.
我使用过 jQuery，因为检测窗口高度容易出现跨浏览器兼容性问题。将标记、css 样式和 JavaScript 功能明确分开是一种很好的做法。
Here is a coded example of what I believe you're trying to achieve:
这是我相信您正在努力实现的编码示例：
For if you haven't used jQuery before, make sure you include this before any of your other JavaScripts within your web page source:
如果您之前没有使用过 jQuery，请确保在您的网页源代码中的任何其他 JavaScript 之前包含它：
Inclusion of jQuery
包含 jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
回答by Art
You want something like this perhaps:
你可能想要这样的东西：
this.style.height = (document.body.clientHeight - 60) + "px";
EDIT:
编辑：
Forgot to mention, you cannot do an onload on a DIV element, only on the body. So if you insist running your javascript that way, you can do it this way...
忘了提，你不能在 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>
To summarize:
总结一下：
- Can't onload on anything, but body see: How to add onload event to a div element?
- Get clientHeight from the document.body. It's not a global property.
- If you were using something like onclick, you can reference the target object using 'this', but not in the way you have it there with document.this. That's invalid.
- 无法加载任何内容，但请查看正文：如何将 onload 事件添加到 div 元素？
- 从 document.body 中获取 clientHeight。它不是全局属性。
- 如果您使用的是 onclick 之类的东西，您可以使用 'this' 来引用目标对象，但不是使用 document.this 的方式。那是无效的。
回答by rdleal
Firstly, HTML 4.01, XHTML 1.0DTDs and HTML5Specs do not define an onloadattribute event for the divelement, so it's no a good idea to do so.
首先，HTML 4.01、XHTML 1.0DTD 和HTML5规范没有onload为div元素定义属性事件，因此这样做不是一个好主意。
In order to make the code work, you must run it after the element you're trying to modify has been loaded in the DOM. There are some ways to achieve this, for instance, after the div declaration:
为了使代码工作，您必须在您尝试修改的元素加载到 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>
or right before the </body>tag.
或在</body>标签之前。
<script>document.getElementById('pageContent').style.height =
(self.innerHeight ? self.innerHeight :
document.documentElement.clientHeight ? document.documentElement.clienteHeight :
document.body.clientHeight) - 60 + "px";</script>
</body>
回答by vol7ron
<body onload="document.getElementById('pageContent').style.height =
parseFloat(document.body.scrollHeight)-60 + 'px';">
<div id="pageContent"></div>
divdoes not have anonloadattribute (you have to usebody)- even if this does work body may be filled in with other stuff afterwards, so it'd be best to apply this on dom ready, as well as to a window resize event
- instead of
clientHeightyou might want to usescrollHeightof thebody
div没有onload属性（你必须使用body）- 即使这确实有效，之后身体可能会被其他东西填充，所以最好将它应用于 dom ready 以及窗口调整大小事件
- 而不是
clientHeight你可能想使用scrollHeight的body
回答by emphaticsunshine
Try something like this:
尝试这样的事情：
<div id="pageContent" onload="this.style.height = (document.body.clientHeight-60)+'px'">
I believe that should work.
我相信这应该有效。
