获取没有在css中设置高度的div的高度

Posted 2023-03-06

【中文标题】获取没有在css中设置高度的div的高度

【英文标题】：Get height of div with no height set in css

【发布时间】：2012-03-24 10:55:40

【问题描述】：

如果没有为元素设置 CSS 高度规则我不能使用 .height() jQuery 方法因为它需要首先设置 CSS 规则，有什么方法可以获取元素的高度？有没有其他方法可以得到高度？

【问题讨论】：

是什么让你觉得height() 需要有一个css规则？

height() 将获得元素的计算高度...

听起来您正试图获取隐藏元素内某物的高度？或元素本身是隐藏的。没办法！

包含您的代码，因为 height 不需要设置 css。该链接与 jquery 无关。

那个“洞察”链接已经 7 岁了！

【参考方案1】：

jQuery .height 将返回元素的高度。它不需要 CSS 定义，因为它决定了计算的高度。

DEMO

您可以根据需要使用.height()、.innerHeight() 或outerHeight()。

.height() - 返回元素的高度，不包括内边距、边框和边距。

.innerHeight() - 返回元素的高度，包括内边距，但不包括边框和边距。

.outerHeight() - 返回包含边框但不包括边距的 div 的高度。

.outerHeight(true) - 返回包含边距的 div 的高度。

查看下面的代码 sn-p 以获取实时演示。 :)

$(function() 
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
);

div  font-size: 0.9em; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="heightTest" style="height: 150px; padding: 10px; margin: 10px; border: 2px solid blue; overflow: hidden; ">
</div>

【参考方案2】：

只是一个注释，以防其他人有同样的问题。

我遇到了同样的问题，但找到了不同的答案。我发现获取高度由其内容决定的 div 的高度需要在 window.load 或 window.scroll 而不是 document.ready 上启动 否则我会得到奇怪的高度/较小的高度，即在图像加载之前。我还使用了 outerHeight()。

var currentHeight = 0;
$(window).load(function() 
    //get the natural page height -set it in variable above.

    currentHeight = $('#js_content_container').outerHeight();

    console.log("set current height on load = " + currentHeight)
    console.log("content height function (should be 374)  = " + contentHeight());   

);

【讨论】：

可能你得到了奇怪的高度，因为在你使用/打印它们之后有更多的说明会改变高度。建议在脚本末尾询问高度

【参考方案3】：

可以在 jQuery 中做到这一点。尝试所有选项 .height()、.innerHeight() 或 .outerHeight()。

$('document').ready(function() 
    $('#right_div').css('height': $('#left_div').innerHeight());
);

示例截图

希望这会有所帮助。谢谢！！

【参考方案4】：

还要确保 div 当前已附加到 DOM 并且 可见。

【讨论】：

请注意，这可能更适合我作为评论而不是答案。

他不会有评论的特权，放轻松。

我认为这是一个至关重要的信息，因为如果元素一开始就没有附加到 DOM，其他答案都不会起作用。