jQuery:在jQuery中获取隐藏元素的高度

Question

我需要获取隐藏在div中的元素的高度.现在我显示div,获得高度,并隐藏父div.这看起来有点傻.有没有更好的办法？

我正在使用jQuery 1.4.2:

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

Answer 1

你可以做这样的事情,虽然有点hacky,忘记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 : "");

Answer 2

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

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

使用

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

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

完整文档请看这里.页面中还有一个演示包含.

希望这有帮助:)

Answer 3

您正在混淆两种CSS样式,即显示样式和可见性样式.

如果通过设置可见性css样式隐藏元素,那么无论元素是否可见,您都应该能够获得高度,因为元素仍占用页面上的空间.

如果通过将显示css样式更改为"none"来隐藏元素,则元素不会在页面上占用空间,并且您必须为其提供显示样式,这将导致元素在某些空间中呈现,哪一点,你可以得到高度.

Answer 4

我实际上有时会采取一些技巧来解决这个问题.我开发了一个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祖先以找到适当的父元素的宽度.

Answer 5

进一步构建用户Nick的答案和用户hitautodestruct的JSBin插件,我创建了一个类似的jQuery插件,它检索宽度和高度,并返回包含这些值的对象.

它可以在这里找到:http: //jsbin.com/ikogez/3/

更新

我已经完全重新设计了这个小小的插件,因为事实证明以前的版本(如上所述)在真正的生活环境中并不真正可用,在这些环境中发生了大量的DOM操作.

这完美地运作:

/**
 * 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;
};

Answer 6

进一步建立尼克的回答:

$("#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属性,一切都恢复正常并仍然隐藏,因为它首先被隐藏.