jQuery:获取隐藏元素的高度

根据定义，元素只有在可见时才有高度。

只是好奇:为什么需要隐藏元素的高度?

一种替代方法是有效地隐藏一个元素，把它放在某种覆盖的后面(使用z-index)。

你可以这样做，尽管有点粗糙，如果position已经是绝对的，就忘记它:

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 : "");

你混淆了两种CSS样式，显示风格和可见性风格。

如果元素通过设置可见性css样式被隐藏，那么无论元素是否作为仍然占用页面空间可见，你都应该能够获得它的高度。

如果通过将display css样式更改为“none”来隐藏元素，那么元素在页面上不占空间，您将不得不给它一个显示样式，这将导致元素在一些空间中呈现，在这一点上，您可以获得高度。

实际上，我有时会使用一些技巧来处理这个问题。我开发了一个jQuery滚动条小部件，在那里我遇到了一个问题，我不知道可滚动的内容是否是隐藏标记的一部分。以下是我所做的:

// try to grab the height of the elem
if (this.element.height() > 0) {
var scroller_height = this.element.height();
var scroller_width = this.element.width();


// if height is zero, then we're dealing with a hidden element
} else {
var copied_elem = this.element.clone()
.attr("id", false)
.css({visibility:"hidden", display:"block",
position:"absolute"});
$("body").append(copied_elem);
var scroller_height = copied_elem.height();
var scroller_width = copied_elem.width();
copied_elem.remove();
}

这在很大程度上是可行的，但有一个明显的问题可能会出现。如果要克隆的内容使用CSS样式，其中包含在规则中引用父标记，那么克隆的内容将不包含适当的样式，并且可能具有略微不同的度量。要解决这个问题，您可以确保要克隆的标记应用了CSS规则，这些规则不包括对父标记的引用。

另外，我的滚动部件没有出现这种情况，但是为了获得克隆元素的适当高度，您需要将宽度设置为与父元素相同的宽度。在我的例子中，CSS宽度总是应用于实际的元素，所以我不必担心这一点，但是，如果元素没有应用宽度，您可能需要对元素的DOM祖先进行某种递归遍历，以找到适当的父元素的宽度。

下面是我编写的一个脚本，用于处理隐藏元素的所有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);

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

如。

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

这样，height()仍然可用。

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

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

使用

$('#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属性，一切恢复正常，仍然是隐藏的，因为它最初是隐藏的。

在用户Nick的回答和用户hitautodestruct的JSBin插件的基础上，我创建了一个类似的jQuery插件，它检索宽度和高度，并返回一个包含这些值的对象。

可以在这里找到: http://jsbin.com/ikogez/3/ < / s > < / p >

更新

/**
* getSize plugin
* This plugin can be used to get the width and height from hidden elements in the DOM.
* It can be used on a jQuery element and will retun an object containing the width
* and height of that element.
*
* Discussed at StackOverflow:
* http://stackoverflow.com/a/8839261/1146033
*
* @author Robin van Baalen <robin@neverwoods.com>
* @version 1.1
*
* CHANGELOG
*  1.0 - Initial release
*  1.1 - Completely revamped internal logic to be compatible with javascript-intense environments
*
* @return {object} The returned object is a native javascript object
*                  (not jQuery, and therefore not chainable!!) that
*                  contains the width and height of the given element.
*/
$.fn.getSize = function() {
var $wrap = $("<div />").appendTo($("body"));
$wrap.css({
"position":   "absolute !important",
"visibility": "hidden !important",
"display":    "block !important"
});


$clone = $(this).clone().appendTo($wrap);


sizes = {
"width": $clone.width(),
"height": $clone.height()
};


$wrap.remove();


return sizes;
};