我需要得到一个元素的高度,在一个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();
当前回答
根据定义,元素只有在可见时才有高度。
只是好奇:为什么需要隐藏元素的高度?
一种替代方法是通过将元素放在某种覆盖层的后面(使用z-index)来有效地隐藏元素。
其他回答
我在获取隐藏元素宽度时遇到了同样的问题,所以我写了这个插件调用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属性,一切恢复正常,仍然是隐藏的,因为它最初是隐藏的。
在我的环境中,我也有一个隐藏的元素阻止我获取高度值,但它不是元素本身,而是它的父元素之一……所以我只是检查了我的一个插件,看看它是否被隐藏,否则就找到最近的隐藏元素。这里有一个例子:
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属性中应该有您想要放回去的东西,并寻找父元素。
我对我的解决方案唯一的不满是,通过父节点的循环不是完全有效的。
如果你之前已经在页面上显示了元素,你可以直接从DOM元素中获取高度(在jQuery中可以通过.get(0)获得),因为即使在元素隐藏时它也会被设置:
$('.hidden-element').get(0).height;
宽度也一样:
$('.hidden-element').get(0).width;
(感谢Skeets O'Reilly的更正)
下面是我编写的一个脚本,用于处理隐藏元素的所有jQuery维度方法,甚至是隐藏父元素的后代。当然,请注意,使用这种方法会影响性能。
// Correctly calculate dimensions of hidden elements
(function($) {
var originals = {},
keys = [
'width',
'height',
'innerWidth',
'innerHeight',
'outerWidth',
'outerHeight',
'offset',
'scrollTop',
'scrollLeft'
],
isVisible = function(el) {
el = $(el);
el.data('hidden', []);
var visible = true,
parents = el.parents(),
hiddenData = el.data('hidden');
if(!el.is(':visible')) {
visible = false;
hiddenData[hiddenData.length] = el;
}
parents.each(function(i, parent) {
parent = $(parent);
if(!parent.is(':visible')) {
visible = false;
hiddenData[hiddenData.length] = parent;
}
});
return visible;
};
$.each(keys, function(i, dimension) {
originals[dimension] = $.fn[dimension];
$.fn[dimension] = function(size) {
var el = $(this[0]);
if(
(
size !== undefined &&
!(
(dimension == 'outerHeight' ||
dimension == 'outerWidth') &&
(size === true || size === false)
)
) ||
isVisible(el)
) {
return originals[dimension].call(this, size);
}
var hiddenData = el.data('hidden'),
topHidden = hiddenData[hiddenData.length - 1],
topHiddenClone = topHidden.clone(true),
topHiddenDescendants = topHidden.find('*').andSelf(),
topHiddenCloneDescendants = topHiddenClone.find('*').andSelf(),
elIndex = topHiddenDescendants.index(el[0]),
clone = topHiddenCloneDescendants[elIndex],
ret;
$.each(hiddenData, function(i, hidden) {
var index = topHiddenDescendants.index(hidden);
$(topHiddenCloneDescendants[index]).show();
});
topHidden.before(topHiddenClone);
if(dimension == 'outerHeight' || dimension == 'outerWidth') {
ret = $(clone)[dimension](size ? true : false);
} else {
ret = $(clone)[dimension]();
}
topHiddenClone.remove();
return ret;
};
});
})(jQuery);