我需要得到一个元素的高度,在一个div是隐藏的。现在我显示div,获得高度,并隐藏父div。这看起来有点傻。有没有更好的办法?
我使用jQuery 1.4.2:
$select.show();
optionHeight = $firstOption.height(); //we can only get height if its visible
$select.hide();
我需要得到一个元素的高度,在一个div是隐藏的。现在我显示div,获得高度,并隐藏父div。这看起来有点傻。有没有更好的办法?
我使用jQuery 1.4.2:
$select.show();
optionHeight = $firstOption.height(); //we can only get height if its visible
$select.hide();
当前回答
你混淆了两种CSS样式,显示样式和可见样式。
如果元素通过设置可见性css样式隐藏,那么无论元素是否可见,您都应该能够获得高度,因为元素仍然占据页面上的空间。
如果通过将display css样式更改为“none”来隐藏元素,那么元素在页面上不占空间,您将不得不给它一个显示样式,这将导致元素在一些空间中呈现,在这一点上,您可以获得高度。
其他回答
根据定义,元素只有在可见时才有高度。
只是好奇:为什么需要隐藏元素的高度?
一种替代方法是通过将元素放在某种覆盖层的后面(使用z-index)来有效地隐藏元素。
我在获取隐藏元素宽度时遇到了同样的问题,所以我写了这个插件调用jQuery Actual来修复它。而不是使用
$('#some-element').height();
use
$('#some-element').actual('height');
会给你隐藏元素的正确值或者元素有一个隐藏的父元素。
完整的文件请见这里。页面中还包括一个演示。
希望这对你有所帮助:)
你可以这样做,虽然有点俗气,如果位置已经是绝对的,就忘记它:
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 : "");
在我的环境中,我也有一个隐藏的元素阻止我获取高度值,但它不是元素本身,而是它的父元素之一……所以我只是检查了我的一个插件,看看它是否被隐藏,否则就找到最近的隐藏元素。这里有一个例子:
var $content = $('.content'),
contentHeight = $content.height(),
contentWidth = $content.width(),
$closestHidden,
styleAttrValue,
limit = 20; //failsafe
if (!contentHeight) {
$closestHidden = $content;
//if the main element itself isn't hidden then roll through the parents
if ($closestHidden.css('display') !== 'none') {
while ($closestHidden.css('display') !== 'none' && $closestHidden.size() && limit) {
$closestHidden = $closestHidden.parent().closest(':hidden');
limit--;
}
}
styleAttrValue = $closestHidden.attr('style');
$closestHidden.css({
position: 'absolute',
visibility: 'hidden',
display: 'block'
});
contentHeight = $content.height();
contentWidth = $content.width();
if (styleAttrValue) {
$closestHidden.attr('style',styleAttrValue);
} else {
$closestHidden.removeAttr('style');
}
}
事实上,这是Nick, Gregory和Eyelidlessness的响应的合并,让您使用Gregory的改进方法,但使用这两种方法,以防在style属性中应该有您想要放回去的东西,并寻找父元素。
我对我的解决方案唯一的不满是,通过父节点的循环不是完全有效的。
我试图找到隐藏元素的工作函数,但我意识到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