需要在頁面上找到隱藏 div 的高度（設置為 display:none）

Question

我需要測量隱藏元素內部的 div 的 offsetHeight。

<div id="parent" style="display: none;">
    <div id="child">Lorem Ipsum dolor sit amet.</div>
</div>

父 div必須設置為“ display:none ”。 我對此無能為力。 我意識到子 div 的 offsetHeight 將是 0。我需要找到一個解決方法。

我玩過的東西是當頁面加載時，我復制父節點的子節點，在頁面上注入一個設置為“ visiblity:hidden ”的div。 然后我測量這些元素的高度，並在完成后刪除節點。

還有其他想法嗎？

更新：我最終不得不做的是：

使用 YUI 2，在頁面加載時，我發現給定類名的所有元素要么設置為 display:none，要么高度和寬度為 0（這是測量元素是否存在的一種方法，或者父項設置為顯示：沒有任何）。 然后我將該元素設置為 display:block。 然后我檢查了它的父級是否相同，並顯示了它的父級，直到它找到一個可見的父級。 一旦最高顯示：無祖先設置為顯示：塊，我可以測量我的元素。

測量完所有元素后，我將所有元素重置回 display:none。

Answer 1

在獲取元素的尺寸時，您需要在很短的時間內使元素的父級可見。 在通用解決方案中，通常會遍歷所有祖先並使其可見。 然后將它們的display值設置回原始值。

當然還有性能問題。

我們在 Prototype.js 實現中考慮了這種方法，但最終getWidth和getHeight只使實際元素可見，而不遍歷祖先。

替代解決方案的問題——比如從“隱藏”父元素中取出元素——是一旦元素脫離了它的“常規”層次結構，某些樣式可能不再適用於該元素。 如果你有這樣的結構：

<div class="foo" style="display:none;">
  <div class="bar">...</div>
</div>

和這些規則：

.bar { width: 10em; }
.foo .bar { width: 15em; }

那么從其父元素中取出元素實際上會導致錯誤的尺寸。

Answer 2

如果您使用style.display = "none" ，則元素的寬度和高度將為 0，
但是使用style.visibility = "hidden"代替，元素將具有由瀏覽器計算的寬度和高度（與往常一樣）。

Answer 3

您可以克隆元素，將其絕對定位在 -10000,-10000，測量克隆並銷毀它。

Answer 4

制作了一個沒有 Jquery 和沒有克隆的純 js 解決方案（我猜這更快）

var getHeight = function(el) {
    var el_style      = window.getComputedStyle(el),
        el_display    = el_style.display,
        el_position   = el_style.position,
        el_visibility = el_style.visibility,
        el_max_height = el_style.maxHeight.replace('px', '').replace('%', ''),

        wanted_height = 0;

    // if its not hidden we just return normal height
    if(el_display !== 'none' && el_max_height !== '0') {
        return el.offsetHeight;
    }

    // the element is hidden so:
    // making the el block so we can meassure its height but still be hidden
    el.style.position   = 'absolute';
    el.style.visibility = 'hidden';
    el.style.display    = 'block';

    wanted_height     = el.offsetHeight;

    // reverting to the original values
    el.style.display    = el_display;
    el.style.position   = el_position;
    el.style.visibility = el_visibility;

    return wanted_height;
}

這是演示https://jsfiddle.net/xuumzf9k/1/

如果你能找到任何改進，請告訴我（因為我在我的主要項目中使用它）

Answer 5

解決方法是將height設置為0

.hidden { 
  height: 0; 
  overflow: hidden; 
}

然后獲取元素scrollHeight 。

document.querySelector('.hidden').scrollHeight

盡管元素沒有出現，但 scrollHeight 將正確地為您提供高度。 我也不認為它會影響元素流。

示例： https : //jsfiddle.net/de3vk8p4/7/
參考： https : //developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Det​​ermining_the_dimensions_of_elements#How_big_is_the_content.3F

Answer 6

所以這是基於 lod3n 的答案並在 999 的評論的幫助下工作的 jQuery 解決方案：

var getHiddenElementHeight = function(element){
    var tempId = 'tmp-'+Math.floor(Math.random()*99999);//generating unique id just in case
    $(element).clone()
    .css('position','absolute')
    .css('height','auto').css('width','1000px')
    //inject right into parent element so all the css applies (yes, i know, except the :first-child and other pseudo stuff..
    .appendTo($(element).parent())
    .css('left','-10000em')
    .addClass(tempId).show()
    h = $('.'+tempId).height()
    $('.'+tempId).remove()
    return h;
}

享受！

Answer 7

使用 z-index 將元素隱藏在非透明元素下，顯示它並獲取高度。

Answer 8

在元素被渲染之前，它沒有高度。 即使您克隆父對象並將其顯示在用戶看不到的地方，也不能保證克隆的高度與隱藏對象的最終大小相同。

有很多東西會影響高度，而這些東西不一定會在克隆中呈現 - DOM 中的任何內容及其與 CSS 規則的交互都可能導致呈現 DOM 的任何其他元素時發生變化。 如果沒有克隆整個文檔（甚至這也不是萬無一失），您就無法確定隱藏對象的高度。

如果在向用戶顯示高度之前必須知道高度，則必須通過盡可能短地顯示它然后再次隱藏它來“破解”它。 最有可能的是，用戶會看到這個問題並且對結果不滿意。

Answer 9

所以，你甚至不能改變display:none; 到height:0; overflow:hidden; height:0; overflow:hidden; ? 也許您可以像這樣在自己的樣式表中覆蓋它：

div#parent { display: block !important; height:0; overflow:hidden; }

然后當你使用 YUI（假設 YUI 2）時，你可以使用這個：

var region = YAHOO.util.Dom.getRegion('child');

獲取孩子的尺寸和偏移量。

Answer 10

輔助功能---

function getElementHeight(el) {
  var clone           = el.cloneNode(true);
  var width           = el.getBoundingClientRect().width;
  clone.style.cssText = 'position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset; width: ' + width + 'px';
  document.body.append(clone);
  var height = clone.getBoundingClientRect().height + 'px';
  clone.remove();
  return height;
}

創建一個克隆，將其附加到 DOM（隱藏），獲取高度，然后將其刪除。

fixed位置和top / left是為了防止您的應用程序允許在主體級別滾動 - 它試圖防止滾動條狂歡派對 - 如果您處理子元素中的滾動，則可以刪除。

Overflow 、 height和max-height設置嘗試“重置”高度設置，讓它成為克隆的自然高度。

明顯和指針事件的Visibility作為“以防萬一”元素的呈現需要一段時間並且不想中斷用戶輸入。

具有“類似手風琴”動畫打開/關閉的示例，允許動態高度。

 function getElementHeight(el) { var clone = el.cloneNode(true); clone.style.cssText = 'position: fixed; top: 0; left: 0; overflow: auto; visibility: hidden; pointer-events: none; height: unset; max-height: unset'; document.body.append(clone); var height = clone.getBoundingClientRect().height + 'px'; clone.remove(); return height; } var expanded = false; function toggle() { var el = document.getElementById('example'); expanded = !expanded; if (expanded) { el.style.maxHeight = getElementHeight(el); // Remove max-height setting to allow dynamic height after it's shown setTimeout(function() { el.style.maxHeight = 'unset'; }, 1000); // Match transition } else { // Set max height to current height for something to animate from el.style.maxHeight = getElementHeight(el); // Let DOM element update max-height, then set to 0 for animated close setTimeout(function() { el.style.maxHeight = 0; }, 1); } }

 #example { overflow: hidden; max-height: 0; transition: max-height 1s; }

 <button onclick="toggle()">Toggle</button> <div id="example"> <textarea>Resize me</textarea> </div>

Answer 11

嘗試使用：

#parent{ display:block !important; visibility:hidden; position:absolute} 

Answer 12

我最終不得不做的是：

使用 YUI 2，在頁面加載時，我發現給定類名的所有元素要么設置為 display:none，要么高度和寬度為 0（這是測量元素是否存在的一種方法，或者父項設置為顯示：沒有任何）。 然后我將該元素設置為 display:block。 然后我檢查了它的父級是否相同，並顯示了它的父級，直到它找到一個可見的父級。 一旦最高顯示：無祖先設置為顯示：塊，我可以測量我的元素。

測量完所有元素后，我將所有元素重置回 display:none。

Answer 13

在JS中請使用'scrollHeight'

示例代碼

假設這個div隱藏在DOM中

<div class="test-div">
 //Some contents 
<div>

用於查找此 div 高度的 Javascript

const testHeight = document.querySelector('.test-div');

testHeight.scrollHeight

Answer 14

你試過這個嗎？

setTimeout('alert($(".Var").height());',200);