Question

我有一个例程，可以对页面中的元素进行大小调整，使其适合父元素。在大多数情况下，它工作得令人钦佩，但在Firefox（JUST 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的display设置为inline-block。我不会认为这会产生影响，但在这种情况下，我对Firefox的一些特定行为没有很好的教育。

Answer 1

我找到了解决方法，虽然它有点情境化。

似乎如果父元素的宽度已使用prototype.js#Element.setStyle()动态修改（并且，据我所知，其他库直接修改style属性），那么{{1在所有更改完成之前，方法不会反映更改。

解决方法是检查要调整大小的元素的父元素是否也有标记要调整大小的元素的CSS类，如果是，则从computedStyle()属性获取大小而不是使用style。以下是完整的功能，并进行了修改：

computedStyle()

现在可以在所有浏览器中正常使用：）

非常感谢你的帮助，人们：）

Answer 2

你试过var targetWidth = parent.clientWidth吗？

请参阅：MDN Element.clientWidth

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

2 个答案: