Question

好的，所以我有一个容器div加载一些由php生成的内容。我不知道内容的高度是多少，它是绝对定位的，所以容器div不知道有多高，直到所有内容都存在。我收集它需要在php变量中的高度，并希望使用jquery将容器div设置为此高度，但它还没有工作。

我已将此代码放在页面底部附近：

<script type="text/javascript">
$(document).ready(function () {
$("#DynContainer").css({height:<?php echo $containerHeight; ?>px})
});
</script>

它目前无法正常工作，但查看php变量正确回显的代码。 E.g：

<script type="text/javascript">
$(document).ready(function () {
$("#DynContainer").css({height:440px})
});
</script>

编辑：

正如许多人提出的那样，我需要为CSS提供有效的代码。我已经改变了它来生成这段代码：

<script type="text/javascript">
$(document).ready(function () {
var containerHeight = "440px";
$("#DynContainer").css({height: containerHeight})
});

然而它仍然无效。 ID参考是deffo正确。

EDIT2：

查看控制台我收到此错误：

[15:46:29.460] TypeError: $ is not a function @ http://localhost/serge/?page_id=2045:242

建议不加载jQuery，但它肯定在页面顶部调用。以下是整个页面代码：http://pastebin.com/tGadjaRA

解决：这是一个noconflict jQuery问题。谢谢大家

Answer 1

在值周围加上引号，因为它是一个字符串：

<script type="text/javascript">
$(document).ready(function () {
$("#DynContainer").css({height:'<?php echo $containerHeight; ?>px'})
});
</script>

http://jsfiddle.net/mblase75/GF3EK/

或者，删除“px”和引号，使其被解析为整数（“px”是默认单位）：

<script type="text/javascript">
$(document).ready(function () {
$("#DynContainer").css({height:<?php echo $containerHeight; ?>})
});
</script>

http://jsfiddle.net/mblase75/GF3EK/1/

Answer 2

“px”导致无效的javascript。正如其他答案所示，您可以在其周围加上引号，或者您可以完全删除px：

$(document).ready(function () {
    $("#DynContainer").css({height:<?php echo $containerHeight; ?>})
});

Answer 3

我建议在脚本开头将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>

JQuery在页面加载时设置div的高度

3 个答案: