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

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 class.

遍历每个元素

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

有人可以解释一下吗？

评论后编辑：

parent.clientWidth returns 0.

不确定这是否相关，但是字段集的父 div 在调用调整大小操作之前不久将 display 设置为 none。但是，在调整字段集大小时，div 的 display 被设置为 inline-block。我不认为认为这会有所作为，但我对 Firefox 在这种情况下的某些特定行为没有很好的了解。

Answer 1

你试过了吗var targetWidth = parent.clientWidth？

参见：MDN Element.clientWidth

Answer 2

我找到了解决这个问题的方法，虽然它有点特殊。

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

解决方案是检查正在调整大小的元素的父元素是否也有标记要调整大小的元素的 CSS class，如果有，则从中获取大小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
        });
    });
}

这现在在所有浏览器中都能正常工作:)

非常感谢大家的帮助:)

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

Getting the computed width of an element after modification

javascript

html

firefox

prototypejs