我需要得到一个元素的高度,在一个div是隐藏的。现在我显示div,获得高度,并隐藏父div。这看起来有点傻。有没有更好的办法?

我使用jQuery 1.4.2:

$select.show();
optionHeight = $firstOption.height(); //we can only get height if its visible
$select.hide();

当前回答

一种解决方法是在你想要获取高度的元素外面创建一个父div,应用高度为“0”并隐藏任何溢出。接下来,获取子元素的高度并删除父元素的overflow属性。

Var height = $("#child").height(); //在这里做点什么 $(" #父母”).append(高度).removeClass(“overflow-y-hidden”); .overflow-y-hidden { 高度:0 px; overflow-y:隐藏; } < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <div id="parent" class="overflow-y-hidden"> < div id = "孩子" > 这是一些我想要得到高度的内容! < / div > < / div >

其他回答

您还可以使用负边距将隐藏的div定位到屏幕之外,而不是使用display:none,很像文本缩进图像替换技术。

eg.

position:absolute;
left:  -2000px;
top: 0;

这样,height()仍然可用。

我试图找到隐藏元素的工作函数,但我意识到CSS比每个人想象的复杂得多。CSS3中有很多新的布局技术,这些技术可能并不适用于以前的所有问题,比如灵活的盒子、网格、列,甚至复杂的父元素中的元素。

flexibox例子

我认为唯一可持续且简单的解决方案是实时渲染。这时,浏览器将为您提供正确的元素大小。

遗憾的是,JavaScript不提供任何直接事件来通知元素何时显示或隐藏。然而,我创建了一些基于DOM属性修改API的函数,当元素的可见性发生变化时,将执行回调函数。

$('[selector]').onVisibleChanged(function(e, isVisible)
{
    var realWidth = $('[selector]').width();
    var realHeight = $('[selector]').height();

    // render or adjust something
});

更多信息,请访问我的项目GitHub。

https://github.com/Soul-Master/visible.event.js

演示:http://jsbin.com/ETiGIre/7

你可以这样做,虽然有点俗气,如果位置已经是绝对的,就忘记它:

var previousCss  = $("#myDiv").attr("style");

$("#myDiv").css({
    position:   'absolute', // Optional if #myDiv is already absolute
    visibility: 'hidden',
    display:    'block'
});

optionHeight = $("#myDiv").height();

$("#myDiv").attr("style", previousCss ? previousCss : "");

我在获取隐藏元素宽度时遇到了同样的问题,所以我写了这个插件调用jQuery Actual来修复它。而不是使用

$('#some-element').height();

use

$('#some-element').actual('height');

会给你隐藏元素的正确值或者元素有一个隐藏的父元素。

完整的文件请见这里。页面中还包括一个演示。

希望这对你有所帮助:)

以尼克的回答为基础:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").css({'position':'static','visibility':'visible', 'display':'none'});

我发现这样做更好:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").removeAttr('style');

设置CSS属性将内联插入它们,这将覆盖你在CSS文件中的任何其他属性。通过删除HTML元素上的style属性,一切恢复正常,仍然是隐藏的,因为它最初是隐藏的。