Question

我正在使用JS（Prototype＆amp; Scriptaculous）在div中添加元素后动态设置div的高度。我的代码已在下面解释：

    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会完全消失。

非常感谢任何帮助。

Answer 1

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

并且作为其提及的文档中的警告的一部分

如果该元素在CSS中通过display: none隐藏，则此方法将尝试通过暂时删除该CSS并应用visibility: hidden和position: absolute来测量该元素。这使元素尺寸不会使其可见或影响周围元素的定位

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

原型JS'getHeight（）'改变对象可见性和其他疯狂

1 个答案: