Question

请查看以下链接。

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 code that handles dimensions。你必须连接一些点，但它似乎并不复杂。

Answer 3

你可以使用

获得div的高度

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

height（）函数计算给定元素的高度。

Answer 4

我从其他答案中得不到多少，并想知道同样的事情并找到了relevant lines in the jQuery 3.0.0-pre source。

如果getClientRects()或getBoundingClientRect()没有返回任何有用的内容，则会使用this swap function临时将这些属性添加到元素中：

{ 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
});

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

5 个答案: