網站搜尋

javascript - jQuery：在 jQuery 中獲取隱藏元素的高度

我需要獲取一個位於被隱藏的 div 內的元素的高度。現在的做法是先顯示該 div，獲取高度，然後再隱藏父 div。這似乎有點愚蠢。有沒有更好的方法？

我正在使用 jQuery 1.4.2：

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

答案＃1

你可以這樣做，有點不正規，如果已經是絕對定位的話，忘掉 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 : "");

答案＃2

我在獲取隱藏元素寬度時遇到了同樣的問題，所以我寫了這個名為 jQuery Actual 的插件來解決它。不是使用

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

使用

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

將為您提供隱藏元素或具有隱藏父元素的元素的正確值。

完整的文件請參見此處。頁面中也包含了一個示範。

希望這對你有幫助 :)

答案＃3

你把兩種 CSS 樣式混淆了，分別是 display 樣式和 visibility 樣式。

如果元素是通過設置 visibility CSS 樣式被隱藏的，那麼你應該能夠獲取其高度，無論元素是否可見，因為元素仍然佔據頁面空間。

如果通過將 display CSS 樣式更改為 "none" 隱藏元素，那麼該元素不會佔據頁面空間，你必須給它一個 display 樣式，使元素在某個空間中呈現，此時你才能獲取其高度。

答案＃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 祖先進行某種遞歸遍歷，以找到適當的父元素寬度。

答案＃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 <[email >
 * @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;
};

答案＃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 屬性，一切都會回到正常狀態並仍然隱藏，因為它一開始就是隱藏的。