我需要得到一个元素的高度，在一个div是隐藏的。现在我显示div，获得高度，并隐藏父div。这看起来有点傻。有没有更好的办法?
我使用jQuery 1.4.2:
$select.show();
optionHeight = $firstOption.height(); //we can only get height if its visible
$select.hide();
当前回答
我试图找到隐藏元素的工作函数，但我意识到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
其他回答
我试图找到隐藏元素的工作函数，但我意识到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
一种解决方法是在你想要获取高度的元素外面创建一个父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 >
根据定义，元素只有在可见时才有高度。
只是好奇:为什么需要隐藏元素的高度?
一种替代方法是通过将元素放在某种覆盖层的后面(使用z-index)来有效地隐藏元素。
你可以这样做，虽然有点俗气，如果位置已经是绝对的，就忘记它:
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 : "");
遵循Nick Craver的解决方案，设置元素的可见性可以让它获得准确的尺寸。我经常用这个方法。然而，不得不手动重置样式，我发现这很麻烦，考虑到修改元素的初始位置/显示在我的css通过开发，我经常忘记更新相关的javascript代码。下面的代码不会重置每个say的样式，而是删除javascript添加的内联样式:
$("#myDiv")
.css({
position: 'absolute',
visibility: 'hidden',
display: 'block'
});
optionHeight = $("#myDiv").height();
optionWidth = $("#myDiv").width();
$("#myDiv").attr('style', '');
这里唯一的假设是不能有其他内联样式，否则它们也会被删除。不过，这里的好处是元素的样式将返回到css样式表中的样式。因此，您可以将其写成一个函数，其中传递一个元素，并返回一个高度或宽度。
我发现通过js设置内联样式的另一个问题是，当通过css3处理过渡时，你被迫调整样式规则的权重，使其比内联样式更强，这有时会令人沮丧。
