4

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

HTML

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

jQuery

$('p').height()
4

5 回答 5

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/

于 2013-10-04T03:44:25.153 回答
1 
var p = $('.frame p').clone().css('display', 'none');
$('body').append(p);
alert(p.height()); // 19
p.remove();

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

于 2013-10-04T04:01:30.753 回答
0

要获取隐藏元素的高度，您需要设置 CSS： 

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

并在获得元素的高度后再次设置css：

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

尝试这个

$(".frame").css({ 'position': 'absolute', 'visibility': 'hidden', 'display': 'block' });
alert($('p').height());
$(".frame").css({'position':'static','visibility':'visible', 'display':'none'});
于 2013-10-04T04:13:48.493 回答
0

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

CSS：-

.frame { width:120px; visibility: hidden;}
于 2013-10-04T04:08:56.470 回答
0

这是小提琴

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

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

于 2013-10-04T03:25:15.163 回答