如何查找未顯示的元素的高度

我正在編寫一個網頁，其中有一張表格，其中的行可以滑動打開和關閉。最初，一些行被關閉（display: none），我希望它們滑動打開。設置高度並使用overflow: hidden不適用於表格行，所以我要更改表格中div的高度。如何查找未顯示的元素的高度

This Works。唯一的問題是，我需要知道div的高度，然後才能打開它，這似乎是不可能的。我能想到的一個解決方案是使用行顯示加載頁面，然後遍歷它們，存儲它們的高度並隱藏它們。我不喜歡這個解決方案，因爲加載時頁面會跳轉。

這是我的問題的一個簡單的，可運行的例子。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
table, td {border: 1px solid black;} 
#lower_row {display: none;} 
#lower_div {overflow: hidden;} 
</style> 
<script type="text/javascript"> 
function toggleLower() { 
    lowerRow = document.getElementById("lower_row"); 
    lowerDiv = document.getElementById("lower_div"); 
    if (getStyle(lowerRow, "display") == "none") { 
     lowerRow.style.display = "table-row"; 
    } 
    else { 
     lowerRow.style.display = "none"; 
    } 
    showHeight(); 
} 
function showHeight() { 
    lowerDiv = document.getElementById("lower_div"); 
    document.getElementById("info").innerHTML = getStyle(lowerDiv, "height"); 
} 
// Return a style atribute of an element. 
// J/S Pro Techniques p136 
function getStyle(elem, name) { 
    if (elem.style[name]) { 
     return elem.style[name]; 
    } 
    else if (elem.currentStyle) { 
     return elem.currentStyle[name]; 
    } 
    else if (document.defaultView && document.defaultView.getComputedStyle) { 
     name = name.replace(/([A-Z])/g, "-$1"); 
     name = name.toLowerCase(); 
     s = document.defaultView.getComputedStyle(elem, ""); 
     return s && s.getPropertyValue(name); 
    } 
    else { 
     return null; 
    } 
} 
</script> 
</head> 

<body onload="showHeight()"> 
<p>The height the lower row is currently <span id="info"></span></p> 
<table> 
<tr id="upper_row" onclick="toggleLower()"><td><p>Click me to toggle the next row.</p></td></tr> 
<tr id="lower_row"><td><div id="lower_div"><p>Peekaboo!</p></div></td></tr> 
</table> 

</body> 
</html>

編輯1：

提出的一種方案是將股利關閉頁面。我無法讓它工作，而且我認爲它會有錯誤的高度，因爲它的高度取決於表格的寬度。

我正在使用visibility:hidden的解決方案，但它有問題。它仍佔用少量空間，報告的高度錯誤。下面是該解決方案的一個例子：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
table {width: 250px;} 
table, td {border: 1px solid black;} 
#lower_row {position: absolute; visibility: hidden} 
#lower_div {overflow: hidden;} 
</style> 
<script type="text/javascript"> 
function toggleLower() { 
    lowerRow = document.getElementById("lower_row"); 
    lowerDiv = document.getElementById("lower_div"); 
    if (getStyle(lowerRow, "visibility") == "hidden") { 
     lowerRow.style.visibility = "visible"; 
     lowerRow.style.position = "static"; 
    } 
    else { 
     lowerRow.style.visibility = "hidden"; 
     lowerRow.style.position = "absolute"; 
    } 
    showHeight(); 
} 
function showHeight() { 
    lowerDiv = document.getElementById("lower_div"); 
    document.getElementById("info").innerHTML = getStyle(lowerDiv, "height"); 
} 
// Return a style atribute of an element. 
// J/S Pro Techniques p136 
function getStyle(elem, name) { 
    if (elem.style[name]) { 
     return elem.style[name]; 
    } 
    else if (elem.currentStyle) { 
     return elem.currentStyle[name]; 
    } 
    else if (document.defaultView && document.defaultView.getComputedStyle) { 
     name = name.replace(/([A-Z])/g, "-$1"); 
     name = name.toLowerCase(); 
     s = document.defaultView.getComputedStyle(elem, ""); 
     return s && s.getPropertyValue(name); 
    } 
    else { 
     return null; 
    } 
} 
</script> 
</head> 

<body onload="showHeight()"> 
<p>The height the lower row is currently <span id="info"></span></p> 
<table> 
<tr id="upper_row" onclick="toggleLower()"><td><p>Click me to toggle the next row.</p></td></tr> 
<tr id="lower_row"><td><div id="lower_div"><p>This is some long text. This is some long text. This is some long text. This is some long text.</p></div></td></tr> 
</table> 

</body> 
</html>

編輯2：解決方案

保羅的回答是解決我的問題：如何找到不顯示元素的高度。但是，它不適用於我的問題。在我的網站上，div的高度取決於它的寬度，這取決於td的寬度，這取決於其他行的狀態和表的寬度，這取決於頁面的寬度。這意味着，即使我預先計算高度，只要有人擴展另一行或更改窗口大小，該值就會出錯。而且，複製表格並保留所有這些限制幾乎是不可能的。

但是，我找到了一個解決方案。當用戶單擊以展開某一行時，我的網站將按順序執行以下步驟：

將div.style.height設置爲1px。
將row.style.display設置爲表格行。
存儲div.scrollHeight的值。
運行滾動動畫，停在div.scrollHeight。
動畫結束後，將div.style.height設置爲auto。

div.scrollHeight給出div的內容的高度，包括其溢出。當div不顯示時它不起作用，但這對我的應用程序不是問題。這裏是一個實際的代碼示例。（同樣，我不包含滾動動畫的代碼，因爲它太長了。）

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
table, td {border: 1px solid black;} 
#lower_row {display: none;} 
#lower_div {overflow: hidden;} 
</style> 
<script type="text/javascript"> 
function toggleLower() { 
    var lowerRow = document.getElementById("lower_row"); 
    var lowerDiv = document.getElementById("lower_div"); 
    if (getStyle(lowerRow, "display") == "none") { 
     lowerDiv.style.height = "0px"; 
     lowerRow.style.display = "table-row"; 
     showHeight(); 
     lowerDiv.style.height = "auto"; 
    } 
    else { 
     lowerDiv.style.height = "0px"; 
     showHeight(); 
     lowerRow.style.display = "none"; 
    } 
} 
function showHeight() { 
    var lowerDiv = document.getElementById("lower_div"); 
    document.getElementById("info").innerHTML = lowerDiv.scrollHeight; 
} 
// Return a style atribute of an element. 
// J/S Pro Techniques p136 
function getStyle(elem, name) { 
    if (elem.style[name]) { 
     return elem.style[name]; 
    } 
    else if (elem.currentStyle) { 
     return elem.currentStyle[name]; 
    } 
    else if (document.defaultView && document.defaultView.getComputedStyle) { 
     name = name.replace(/([A-Z])/g, "-$1"); 
     name = name.toLowerCase(); 
     s = document.defaultView.getComputedStyle(elem, ""); 
     return s && s.getPropertyValue(name); 
    } 
    else { 
     return null; 
    } 
} 
</script> 
</head> 

<body> 
<p>The height the lower row is currently <span id="info">...</span></p> 
<table> 
<tr id="upper_row" onclick="toggleLower()"><td><p>Click me to toggle the next row.</p></td></tr> 
<tr id="lower_row"><td><div id="lower_div"><p> 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
This is some long text. This is some long text. This is some long text. This is some long text. 
</p></div></td></tr> 
</table> 

</body> 
</html>

來源

2011-11-18 dln385

什麼似乎是問題？你的html工作正常。當我點擊該行時，下面一行展開。 –

@vishal爲了保持簡單，我的示例沒有滑動動畫。爲了有一個滑動動畫，我需要在擴展之前知道高度。如我的示例所示，擴展之前的高度是「auto」。 – dln385

@ dln385請在我的帖子中看到我的更新 –

你可以在div與內容複製，並把它的身體絕對定位top:-10000; left:-10000;所以這將是可見的區域之外，那麼你就可以計算高度，並從DOM刪除克隆。

UPDATE

或者，當你添加動態方式元素的情況下，可以將其設置爲display:block，position:absolute和visibility:hidden - 但你必須確保它不會改變任何元素的位置在頁面上。 visibility:hidden - 將不顯示元素，但計算出它的尺寸（對比display: none）

UPDATE

你的具體情況，你的父母對孩子的尺寸的影響，所以你需要克隆你的元素成爲可見區域外的「相似」父代。說「類似」我的意思是它應該具有相同的尺寸，但在一般 - 風格和一切什麼是關係到它的大小：

var wrapper = $('<div></div>').appendTo('body').css('display', 'block').css('position', 'absolute').css('top', -10000).css('left', -10000).css('width', $('table').css('width')); 
var clone = $('#lower_div').clone().appendTo(wrapper);  
document.getElementById("info").innerHTML = clone.height();

這裏是爲你工作jsfiddle。

來源

2011-11-18 18:06:27

對於沒有隱藏溢出的頁面，不會顯示滾動條嗎？把它扔到iframe的width：0;身高：0;'？ – Sorpigal

不，它不會顯示任何滾動條，因爲它將不在頁面流中。順便說一句，不要忘了將相同的樣式應用於div，因此副本將具有完全相同的高度。 iframe可以工作，但它是更重/更慢的解決方案。 –

@Paul我無法得到任何解決方案的工作。請參閱我的編輯。 – dln385

如何查找未顯示的元素的高度

回答

相關問題