任何方式來獲取不可見元素的何時可見高度？

我有一個彈出菜單，其中一些彈出窗口隱藏自己，其他窗口根據鼠標的位置隱藏自己。您在購物網站上看到的典型動作亞馬遜。任何方式來獲取不可見元素的何時可見高度？

我想從背景中的JavaScript插入，爲使用jQuery動態顯示這些彈出窗口上的文本設置填充。

問題是我需要獲得某些元素的高度，並且當我使用jQuery爲給定元素使用.height()值時，如果彈出部分其一部分隱藏（display:none），則返回零。如果我取消隱藏彈出部分，那麼當父彈出窗口可見時，該元素的高度會更改爲其高度。

那麼有沒有什麼方法可以讀取元素的實際高度，當元素的實際高度不可見時？

來源

2014-04-28 Ahmad

你可以讓家長看到設置的位置：絕對和頂部設置：-9999離開：-9999，這樣你就可以測量使用元素jqeury .height（）函數的高度。 – milagvoniduak

如果用「不可見」表示有display: none，那麼沒有。

但是，您可以在技術上可見的同時使元素幾乎不可見，例如，與position: absolute; left: -99999px。這將允許您測量它。

當然，即使使用這種技術也有一定的限制（取決於其他樣式，當絕對定位時，元素可能會有不同的佈局;如果不是絕對定位，則會佔用佈局空間，影響其他元素）但是有相當多的你可以做它。

來源

2014-04-28 18:48:08 Jon

我們必須查看您的實際HTML和代碼，才能知道最適合您的解決方案。我的猜測是，你可能可以使用相對定位來解決你的問題，而不必知道高度。

但是，爲了回答您的具體問題，去佈局，它的實際高度的元素沒有顯示在屏幕上的一種方式是將其暫時更改爲：

position: absolute; 
visibility: hidden; 
display: block;

這將使它在技術上可見瀏覽器（所以它會得到佈局），即使它不會是最終用戶可以看到的東西。然後，讀取它的高度，然後將其位置和可視性顯示出來，並將其顯示回原來的樣子。

事實上，也有一些情況，其中jQuery的.height()方法已經爲你做這個臨時交換（我只是通過一個測試案例階梯，只見它做到這一點），所以我想直接幫助您進一步多，我們真的需要看到您的實際HTML和JavaScript來查看您的具體問題是什麼。

來源

2014-04-28 18:50:29 jfriend00

一種方法是將元素離屏，取消隱藏，獲取高度，然後再次隱藏它。

<script> 
function getMenuItemHeight(elementSelector) { 
    var elementHeight = 0; 
    var myElement = $(elementSelector); 
    myElement.css({'position':'absolute','left':'-9999x'}).show(); 
    elementHeight = myElement.height(); 
    myElement.hide().css({'position':'','left':''}); 
    return elementHeight; 
} 
</script>

或者，您可以克隆的元素，並將其放置在屏幕外的容器，這個高度，然後銷燬副本。唯一的問題是，它可能沒有菜單的CSS樣式，這意味着您可能無法獲得相同的高度值。但是，如果您只是爲離屏容器中的項目添加CSS規則，那麼這很容易解決。

<script> 
function getMenuItemHeight(elementSelector) { 
    var elementHeight = 0; 
    var myElement = $(elementSelector).clone(); 
    var container = $('<div id="offscreen-container" style="position:absolute;left:-9999px">'); 
    container.append(myElement); 
    elementHeight = myElement.height(); 
    container.remove(); 
    return elementHeight; 
} 
</script>

來源

2014-04-28 19:00:17 hargobind

任何方式來獲取不可見元素的何時可見高度？

回答

相關問題