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

Question

我有一个例程，可以调整页面中元素的大小以使其紧贴其父级。在大多数情况下，它工作得很好，但在 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 的 display 被设置为 inline-block。我认为这不会产生什么影响，但我对 Firefox 在这种情况下的一些特定行为并没有很好的了解。

Answer 1

我找到了解决这个问题的方法，尽管它有点视情况而定。

似乎如果使用 prototype.js#Element.setStyle() 动态修改父元素的宽度(据我所知，其他直接修改 >style 属性)，那么在所有更改完成之前，compulatedStyle() 方法不会反射(reflect)更改。

解决方案是检查要调整大小的元素的父元素是否也具有标记要调整大小的元素的 CSS 类，如果有，则从 style 属性获取大小而不是使用compulatedStyle()。这是经过修改的完整函数:

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
        });
    });
}

现在这可以在所有浏览器中正常工作:)

非常感谢大家的帮助:)