Question

我的网页中隐藏了元素，我需要获得该元素的高度。我已尝试使用.clientHeight，offsetHeight，.height（）和window.getComputedStyle，但在附加方案中没有。有没有任何技巧可以在不添加任何插件的情况下获得高度。 fiddle

HTML

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

Jquery的

$('p').height()

Answer 1

您可以在屏幕外渲染，用户无法看到它，获得高度，然后将元素恢复正常。

这比使用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/

Answer 2

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

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

Answer 3

这是FIDDLE

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

如果您愿意，可以试试这个。：）

Answer 4

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

<强> CSS： -

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

Answer 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'});

如何获取隐藏元素高度

5 个答案:

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