原型JS'getHeight（）'改變對象的可見性和其他瘋狂

我使用JS（Prototype & Scriptaculous）在元素添加到div內動態設置div的高度。我的代碼已經被意譯如下：原型JS'getHeight（）'改變對象的可見性和其他瘋狂

bheight = $('body_'+current_item).getHeight(); 
    bheight += 22; 
    bheight += 'px'; 
    $('body_'+current_item).setStyle({ 
    height: bheight 
    });

在上面的代碼中，我第一次使用「的getHeight（）函數來獲得獨特的車身div的高度。然後我在這個數字上加上22，然後追加'px'到最後，並使用'setStyle'應用這個變化。

這裏是怪異的部分。當我運行我的函數，這是駐留在頁面加載後，一切都運行完美。但是，如果我添加一行來在JavaScript文件的末尾運行該函數（因此它在頁面加載時運行），我會變得瘋狂。隨着能見度被神奇地改變，整個div消失。有關信息，請參閱下面的代碼段。

<div id="body_1" class="edit_bg_box" style="position: absolute; visibility: hidden; display: block; width: 200px; height: 22px;">Internal div data...</div>

在我的CSS或代碼中沒有任何地方將隱藏或位置的可見性設置爲絕對。爲了進行比較，下面是應該看起來像的div 的片段。

<div id="body_1" class="edit_bg_box"></div>

在這一點上我失去了理智。如果我從主div中刪除'getHeight（）'函數，一切都顯示正常（'getHeight（）'應該修復的div高度除外）。如果我添加'getheight（）'函數，div完全消失。

任何幫助將不勝感激。

來源

2013-07-16 dwmcc

無法發表評論，所以不得不發表一個答案。您發佈的部分代碼沒有任何問題。我猜是什麼原因導致這個問題必須來自其他地方，所以如果你能發佈更多的代碼，那將是非常棒的。附：你有兩個div和一個封閉標籤，你可以說它應該是什麼樣子。這肯定會造成一些樣式問題。 – Samurai

感謝您的輸入。我在上面引用的代碼中修復了div問題，我錯誤地將它加入了。我已經測試了帶和不帶'getWidth（）'函數的代碼，並且當上面的第一行代碼被註釋掉時，造型）。我看不出其他代碼是如何引起這個問題的，因爲它在寬度函數被註釋掉時工作。 – dwmcc

那麼我使用ID =「body_1」的div，添加一個onclick並將相同的代碼放入它所指的函數中。它工作得很好，每次點擊都會增加高度。我剛剛添加了var current_item = 1;以上。你如何初始化current_item？調試時你有任何錯誤嗎？ – Samurai

的getHeight()方法利用了getDimensions()方法http://api.prototypejs.org/dom/Element/getDimensions/

和如文檔中所述警告的一部分它提到

如果該元素是通過在CSS display: none隱藏的，則此方法將試圖通過臨時刪除該CSS並應用visibility: hidden和position: absolute來測量該元素。這使元件的尺寸不使其可見或影響周圍的元素

的定位因此，有一種可能性，即一個或多個您的div的父元素是隱藏的display:none;和頁面加載後顯示。

來源

2013-07-16 20:50:11

就是這樣！這是一個簡單的錯誤，直到我讀到你的答案才找到。非常感謝你！ – dwmcc

原型JS'getHeight（）'改變對象的可見性和其他瘋狂

回答

相關問題