JQuery 在页面加载时设置 div 的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12264236/
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
JQuery to set the height of a div on page load
提问by harryg
OK so I have a container div that loads some content which is generated by php. I don't know what the height of the content is and it is absolute positioned so the container div doesn't know how high to be until all the content is there. I collect the the height it needs to be in a php variable and want to use jquery to set the container div to this height but it's not working yet.
好的，所以我有一个容器 div，它加载了一些由 php 生成的内容。我不知道内容的高度是多少，并且它是绝对定位的，因此在所有内容都存在之前，容器 div 不知道有多高。我收集了它需要在 php 变量中的高度，并想使用 jquery 将容器 div 设置为这个高度，但它还没有工作。
I have put this code near the bottom of the page:
我已将此代码放在页面底部附近：
<script type="text/javascript">
$(document).ready(function () {
$("#DynContainer").css({height:<?php echo $containerHeight; ?>px})
});
</script>
It is currently not working but looking at the code the php variable is echoed into it correctly. E.g:
它目前无法正常工作，但查看 php 变量正确回显的代码。例如：
<script type="text/javascript">
$(document).ready(function () {
$("#DynContainer").css({height:440px})
});
</script>
EDIT:
编辑：
As many have helpfully suggested I needed to provide valid code for the CSS. I have since changed it to generate this code:
正如许多有用的建议我需要为 CSS 提供有效的代码。我已经将其更改为生成此代码：
<script type="text/javascript">
$(document).ready(function () {
var containerHeight = "440px";
$("#DynContainer").css({height: containerHeight})
});
However it still doesn't work. The ID reference is deffo correct.
但是它仍然不起作用。ID 引用是正确的。
EDIT2:
编辑2：
Looking at the console I get this error:
查看控制台，我收到此错误：
[15:46:29.460] TypeError: $ is not a function @ http://localhost/serge/?page_id=2045:242
Suggesting jQuery is not loaded, but it's definitely called at the top of the page. Here is the whole page code: http://pastebin.com/tGadjaRA
建议 jQuery 未加载，但它肯定会在页面顶部调用。这是整个页面代码：http: //pastebin.com/tGadjaRA
SOLVED: it was a noconflict jQuery issue. Thanks everyone
已解决：这是一个无冲突的 jQuery 问题。谢谢大家
回答by Blazemonger
Put quotes around the value, since it's a string:
在值周围加上引号，因为它是一个字符串：
<script type="text/javascript">
$(document).ready(function () {
$("#DynContainer").css({height:'<?php echo $containerHeight; ?>px'})
});
</script>
http://jsfiddle.net/mblase75/GF3EK/
http://jsfiddle.net/mblase75/GF3EK/
Alternatively, remove the "px" and the quotes so it's parsed as an integer ("px" is the default unit):
或者，删除“px”和引号，以便将其解析为整数（“px”是默认单位）：
<script type="text/javascript">
$(document).ready(function () {
$("#DynContainer").css({height:<?php echo $containerHeight; ?>})
});
</script>
回答by John Koerner
The "px" is resulting in invalid javascript. As other answers suggest, you can put quotes around it or you can remove the px completely:
“px”导致无效的javascript。正如其他答案所建议的那样，您可以在其周围加上引号，也可以完全删除 px：
$(document).ready(function () {
$("#DynContainer").css({height:<?php echo $containerHeight; ?>})
});
回答by Pavel S.
I'd recommend passing PHP variables to JS at the beginning of the script:
我建议在脚本的开头将 PHP 变量传递给 JS：
<script type="text/javascript">
var containerHeight = <?php echo $containerHeight; ?>;
// from now, it's pure JS. both better maintainable and readable
$(document).ready(function () {
$("#DynContainer").css({'height': containerHeight})
});
</script>
