如何获得隐藏元素高度[重复]答案

【问题标题】：How to get hidden element Height [duplicate]如何获得隐藏元素高度[重复]
【发布时间】：2013-10-10 22:33:07
【问题描述】：

我的网页中有隐藏元素，我需要获取该元素的高度。我已经尝试过使用 .clientHeight、offsetHeight、.height() 和 window.getComputedStyle，但在附加场景中没有这样的工作。有没有什么技巧可以在不添加任何插件的情况下获得高度。 fiddle

HTML

<div class="frame">
<p>some text some text some text some text</p>
</div>

jQuery

$('p').height()

【问题讨论】：

试试.clientHeight 而不是.clientWidth :p
@ŠimeVidas：这是我的拼写错误，clientHeight 也不起作用
您可以暂时删除display:none并添加visibility:hidden。
警报($('p').html().length)
@RobertRozas：这行不通……当实际元素高度为 20 时，它返回 39。

标签： javascript jquery

【解决方案1】：

var p = $('.frame p').clone().css('display', 'none');
$('body').append(p);
alert(p.height()); // 19
p.remove();

工作示例：http://jsfiddle.net/D9PyE/

【讨论】：

克隆它实际上是一个好主意。这样一来，您就不必破坏原始元素，无论它是如何设置的。

【解决方案2】：

您可以在用户看不到它的屏幕外渲染它，获取它的高度，然后将元素恢复到正常状态。

它比使用visibility: visible 更好，因为它不会破坏页面上其他元素的定位。

HTML

<div class="frame">
    <p>some text some text some text some text</p>
</div>

CSS

.frame {
    width: 120px;
    display: none;
}

.offscreen {
    position: fixed !important;
    left: -9999px !important;
    display: inline !important;
}

JavaScript

$('.frame').addClass('offscreen');

alert('The hieght of \'p\' is: ' + $('p').height() + 'px');

$('.frame').removeClass('offscreen');

小提琴链接：http://jsfiddle.net/HfyfX/

【讨论】：

【解决方案3】：

这是FIDDLE

alert($('div').removeClass('frame').css('visibility','hidden').find('p').height());
$('div').addClass('frame').css('visibility','visible');

如果你愿意，你可以试试这个。 :)

【讨论】：

【解决方案4】：

试试这个：- http://jsfiddle.net/adiioo7/teeFD/7/

CSS：-

.frame { width:120px; visibility: hidden;}

【讨论】：

我不喜欢这种方法。它扰乱了其他元素的位置 (example here)
@JoeSimmons 添加position:absolute，不会影响其他元素。
我更喜欢我的方法。

【解决方案5】：

要获得隐藏元素的高度，你需要设置 CSS ：

$(".frame").css({ 'position': 'absolute', 'visibility': 'hidden', 'display': 'block' });

获取元素高度后再次设置css：

$(".frame").css({'position':'static','visibility':'visible', 'display':'none'});

Try This

$(".frame").css({ 'position': 'absolute', 'visibility': 'hidden', 'display': 'block' });
alert($('p').height());
$(".frame").css({'position':'static','visibility':'visible', 'display':'none'});

【讨论】：