javascript - jquery 如何获得隐藏 div 的高度？

Question

请查看以下链接。

http://jsfiddle.net/YJMrE/

HTML：

<div id="test">
    <div id="test1">test 1</div>
    <div id="test2">test 2</div>
</div>

Javascript：

$(document).ready(function(){
    $("#test").hide();
    alert($("#test").height());
    alert(document.getElementById("test").getBoundingClientRect().height);
});

jquery如何单独获得隐藏div的高度？谢谢！

Answer 1

将此用于您的脚本：

$(document).ready(function(){
    var x = document.getElementById("test").getBoundingClientRect().height;
    $("#test").hide();
    alert($("#test").height());
    alert(x);
});

Answer 2

在纯 JavaScript 中，你可以做这样的事情，它应该可以工作：

// $("#test").hide();
// alert($("#test").height());

var el = document.getElementById("test");
el.style.position = 'absolute';
el.style.visibility = 'hidden';

alert(el.offsetHeight); // 40

jQuery 可能正在以其他方式为您创造奇迹。用 获取隐藏对​​象的尺寸是不可靠的display: none。

编辑：这是处理尺寸的 jQuery 代码。您必须连接一些点，但这似乎并不复杂。

Answer 3

您可以使用以下方法获取 div 的高度，

$('#test1').height();
$('#test2').height();

height() 函数计算给定元素的高度。

Answer 4

我没有从其他答案中得到太多，想知道同样的事情，并在 jQuery 3.0.0-pre source 中找到了相关行。

如果或不返回任何有用的东西，这些属性会使用此交换函数临时添加到元素中：getClientRects()getBoundingClientRect()

{ position: "absolute", visibility: "hidden", display: "block" }

然后它调用val = elem.getBoundingClientRect()[ name ];以获取宽度（第 127 行 - 3.0.0-pre）。

Answer 5

注意区别：http: //jsfiddle.net/YJMrE/5/

Jquery 隐藏它，因此它知道隐藏元素在隐藏之前的高度。

而 javascript 只是简单地返回当前高度。

$(document).ready(function(){        
    alert(document.getElementById("test").getBoundingClientRect().height); // 40
    $("#test").hide();    
    alert(document.getElementById("test").getBoundingClientRect().height); // 0
});