获取高度div没有设置在CSS中的高度
如果没有为元素设置CSS高度规则，是否有任何方法来获取元素的高度我不能使用.height（）jQuery方法，因为它需要一个CSS规则集？ 有没有其他方法来获得高度？
jQuery .height将返回元素的高度。 它不需要CSS定义，因为它决定了计算的高度。
DEMO
您可以根据需要使用.height() .innerHeight()或outerHeight() 。
.height() – 返回元素的高度，不包括填充，边框和边距。
.innerHeight() – 返回元素的高度，包括填充，但不包括边框和边距。
.outerHeight() – 返回包含边框的div的高度，但不包括边距。
.outerHeight(true) – 返回包含边距的div的高度。
在下面的代码片段中查看现场演示。 🙂
$(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>
只是一个注意事项，以防其他人有同样的问题。
我有同样的问题，并find了不同的答案。 我发现获取高度的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()); });
还要确保div当前附加到DOM和可见 。
可以在jQuery中做到这一点。 尝试所有选项.height() .innerHeight()或.outerHeight() 。
$('document').ready(function() { $('#right_div').css({'height': $('#left_div').innerHeight()}); });
示例屏幕截图
希望这可以帮助。 谢谢！！
