javascript獲取具有隱藏父元素的元素的大小

Question

我需要使用javascript確定DOM元素的高度-在我的情況下，特別是包含一些文本的div。 由於HTML的工作方式，我只能在可見的情況下可靠地執行此操作。 通用解決方案是顯示元素，獲取元素的高度，然后隱藏它-在單個元素的情況下足夠簡單。

但是，在一般情況下，有問題的元素可能是其他隱藏元素的子元素，因此阻止了上述解決方案的工作-在有問題的元素上調用jQuery的show()函數實際上並不會導致其顯示由於隱藏了父級，所以您仍然無法獲得身高。

考慮到需要使其可見才能使其正常工作的所有父元素，我如何才能使元素可見的時間足夠長以達到其高度？

用例：我正在嘗試編寫一些可應用於任何表元素的代碼，這些代碼將創建一些其他元素，其高度應與表頭的高度匹配。 我想使代碼足夠通用，無論表位於DOM中的哪個位置或當前是否可見，它都將起作用。 另一種解決方案是使用一些JavaScript，當表頭的大小發生變化時（例如，在顯示時），它們會簡單地調整所創建元素的大小，但從概念上講，效率似乎較低。 不過，如果更簡單，我將接受它作為答案。

編輯：舉個例子，在記住我要尋求不依賴於此特定HTML布局的通用解決方案的同時，請考慮以下HTML：

<div style="display:none; line-height:22px; font-size:18px;">
    ...Some random text or other content...
    <div id="desired_size">
        I want to find the height of this div when visible
    </div>
    ...Possibly some more content/other stuff...
</div>

目的是獲取內部div的高度，但是我不能這樣做，因為它沒有顯示-由於父div被隱藏，所以它被隱藏了。 如果我對HTML的了解只是desired_size div大小，我將如何使其足夠可見以獲取高度？ 當然，這個例子很簡單，但是我試圖將其概括。

編輯2：一種建議是克隆元素並將其移動到可見的位置。 這行得通，但有一個警告：所有會影響大小的繼承CSS屬性都將丟失。

編輯3：我試圖編寫代碼塊，以便可以在各種網頁中重復使用，而不僅僅是編碼為特定的布局。 因此，我無法對父HTML做出任何假設或更改。 上面的示例顯示了一種可能導致困難的情況。

編輯4：正如已經指出的那樣，更改HTML以使視覺外觀相同是很簡單的，但是這個問題不存在。 不過，我試圖找到書面 ，無論HTML是怎么寫的與HTML工作的解決方案。

Answer 1

演示-http : //jsbin.com/tosusanowu/edit?html,js，輸出

---

假設您知道desired_size div始終有一個隱藏的parent 。

$(function(){
    var desired_size = getDesiredSize('#desired_size');
});

function getDesiredSize(el) {
    var $el = $(el), $parent = $el.parent(), desired_size = 0;
    $parent.attr('style', 'opacity:0;position:absolute');
    desired_size = $el.height();
    $parent.attr('style', 'display:none');
    return desired_size;
}

---

<div style="display:none;">
    ...Some random text or other content...
    <div id="desired_size">
        I want to find the height of this div when visible
    </div>
    ...Possibly some more content/other stuff...
</div>

Answer 2

以下javascript / jQuery函數通常應按要求在HTML結構未知的情況下工作：

function getHeight(objectID){
    var object=$('#'+objectID);
    var nextObject=object;
    var changedObjects=[];
    var counter=0; //to prevent infinite looping
    while(!object.is(':visible') && counter<100){
        counter+=1;
        var curObject=nextObject; //store a reference for use in loop
        nextObject=curObject.parent();
        var curStyle=curObject.css('display') //see if current object is hidden

        if(curStyle!='none')
            continue; //don't mess with non-hidden objects

        //see if the display style is inline, or from a CSS file
        var inlineStyles=curObject.attr("style");

        if(typeof(inlineStyles)!=='undefined'){
            inlineStyles.split(";").forEach(function(element){
                var style = element.split(":");
                if ($.trim(style[0]) === 'display') {
                    //Record the fact that the display properly is an inline style
                    curObject.data('floatinghead_inline_style',true);
                    return false; //break out of the forEach loop
                }
            });
        }

        curObject.show(); //if object is hidden, show it for now
        visitedObjects.push(curObject); //save a reference so we can put it back later
    }

    var height=object.height(); //this should work properly, since object should now be visible

    visitedObjects.forEach(function(item){
        if(item.data('floatinghead_inline_style')===true)
            item.hide();
        else
            item.css('display','');
    })
}

上面的代碼不假設HTML結構，特別是有關隱藏的父元素中所討論對象的深度。 另外，與“將項目克隆到DOM中不同的可見位置”選項不同，它應適當考慮任何影響高度的繼承屬性。