0

我正在使用 JS (Prototype & Scriptaculous) 在 div 中添加元素后动态设置 div 的高度。我的代码已被解释如下：

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

在上面的代码中，我首先使用 'getHeight()' 函数来获取唯一 body 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 会完全消失。

任何帮助将不胜感激。

4

1 回答 1

2

该getHeight()方法使用getDimensions()方法http://api.prototypejs.org/dom/Element/getDimensions/

并且作为它提到的文档中的警告的一部分

如果元素通过display: noneCSS 隐藏，此方法将尝试通过临时删除该 CSS 并应用visibility: hiddenand来测量元素position: absolute。这给出了元素尺寸而不使其可见或影响周围元素的定位

因此，您的 div 的一个或多个父元素有可能被隐藏display:none;并在页面加载后显示。

于 2013-07-16T20:50:11.397 回答