Javascript 获取修改后元素的计算宽度

我有一个例行程序，调整页面中元素的大小，使其与父元素紧密匹配。在大多数情况下，它工作得很好，但在Firefox中（仅Firefox-Chrome、IE等都可以），它在一个特定实例中的第一次尝试中遇到了麻烦-嵌套在字段集中的div在第一次尝试时无法调整大小，但在第二次（以及随后的）尝试中成功

每个元素都使用以下方法相对于其父元素调整大小：

function resizeChild(elem) {
    // Get gutter based on margins, borders, padding, etc
    var gutter = getGutter(elem); // returns obj with x and y properties
    var parent = elem.parentElement;
    var parentStyles = window.computedStyle(parent);
    var targetWidth = (parseInt(parentStyles['width']) - gutter.x;
    var widthPx = targetWidth + 'px';
    // prototype.js setStyle shortcut
    elem.setStyle({
        width: widthPx,
        maxWidth: widthPx,
        minWidth: widthPx
    });
}

我在循环中运行它，使用特定的CSS类迭代每个元素

根据Firefox调试器，外部元素（字段集）总是在内部div之前调整大小。我可以检查元素，并查看样式属性的设置是否正确。但是，在循环的下一次迭代中，当评估父级时（我可以在javascript属性检查器中看到父级确实是字段集），为计算样式返回的宽度值是上一个未修改的值，因此内部div的大小调整不正确

有人能解释一下吗

评论后编辑：

parent.clientWidth

返回0

---

不确定这是否相关，但在调用调整大小操作之前不久，字段集的父div已将

display

设置为

none

。但是，在调整字段集大小时，div的

显示

被设置为

内联块

。我不认为这会有什么不同，但是我对Firefox在这种情况下的一些特殊行为没有很好的了解。

你试过

var targetWidth=parent.clientWidth

---

请参阅：

我找到了一个解决方案，尽管这有点像情境

似乎如果父元素的宽度是使用

prototype.js#element.setStyle（）

动态修改的（据我所知，其他库直接修改

style

属性），那么

computedStyle（）

方法在所有更改完成之前不会反映更改

解决方案是检查正在调整大小的元素的父元素是否也有标记要调整大小的元素的CSS类，如果有，则从

style

属性获取大小，而不是使用

computedStyle（）

。以下是经过修改的完整功能：

function resizeFullwidth() {
    $$('*.fullWidth').each(function(elem, i) {
        // Get gutter based on margins, borders, padding, etc
        var gutter = getGutter(elem); // returns obj with x and y properties
        var parent = elem.parentElement;
        var parentStyles = (
            parent.hasClassName('fullWidth')
                ? window.computedStyle(parent)
                : parent.style);
        var targetWidth = (parseInt(parentStyles['width']) - gutter.x;
        var widthPx = targetWidth + 'px';
        // prototype.js setStyle shortcut
        elem.setStyle({
            width: widthPx,
            maxWidth: widthPx,
            minWidth: widthPx
        });
    });
}

这现在在所有浏览器中都能正常工作：）

---

非常感谢您的帮助，各位：）

我有。在执行此操作时，parent.clientWidth返回0。不确定这是否相关，但在调用调整大小操作之前不久，字段集的父div已将

display

设置为

none

。但是，在调整字段集大小时，div的

显示

被设置为

内联块

。我不认为这会有什么不同，但是我对Firefox在这个场景中的一些特殊行为没有很好的了解。@Minouris。您不能使用

display:none

返回元素的宽度，因此可能是因为代码的执行速度比Firefox更新DOM的速度快？您看到这个页面了吗？我有：）在这种情况下，问题是许多用于查询父div布局的标准API方法在第一次调整页面的这个特定区域的大小时返回0-我得到的唯一非零值来自计算样式。不幸的是，计算样式似乎包含了调整大小之前的父元素的维度（如果它也调整了大小的话）。这几乎就像——只是把它放在那里，作为一个空闲的沉思——就像Firefox将resizeFullWidth（）函数当作一个事务单元，在整个功能完成之前，不要将修改后的属性应用于DOM。你能用简单的HTML测试页面更新javascript，以便它可以被复制和快速测试吗？我认为在静态HTML中复制会很困难，因为移动的部分太多了。（编辑-此编辑器不允许换行符：P）。在此之前，使用prototype.js中的Ajax.Updater对象将内容加载到父区域。父div本身是作为选项卡式窗口的一部分动态生成的。我的网站上有一些更简单的例子，它们正在发挥作用——只是这个边缘案例给我带来了麻烦。