jQuery - 在不可见时获取元素的宽度(显示 : None)

Question

在 jQuery 中，当元素不可见时 width() 返回 0 似乎是有道理的，但我需要获取表格的宽度以便在显示父级之前设置父级的宽度。

如下所述，父级中有文本，这使得父级倾斜并且看起来很讨厌。我希望父级仅与表格一样宽并且文本换行。

<div id="parent">
    Text here ... Can get very long and skew the parent
    <table> ... </table>
    Text here too ... which is why I want to shrink the parent based on the table
</div>

CSS:

#parent
{
    display: none;
}

Javascript:

var tableWidth = $('#parent').children('table').outerWidth();
if (tableWidth > $('#parent').width())
{
    $('#parent').width(tableWidth);
}

tableWidth 总是返回 0，因为它不可见(这是我的猜测，因为它在可见时给我一个数字)。有没有办法在不使父级可见的情况下获取表格的宽度？

Answer 1

这是我用过的一个技巧。它涉及添加一些 CSS 属性，使 jQuery 认为该元素是可见的，但实际上它仍然是隐藏的。

var $table = $("#parent").children("table");
$table.css({ position: "absolute", visibility: "hidden", display: "block" });
var tableWidth = $table.outerWidth();
$table.css({ position: "", visibility: "", display: "" });

这有点 hack，但对我来说似乎工作正常。

更新

我已经写了一个blog post涵盖了这个主题。上面使用的方法可能会出现问题，因为您正在将 CSS 属性重置为空值。如果他们以前有值(value)观怎么办？更新后的解决方案使用 jQuery 源代码中的 swap() 方法。

引用博客文章中的代码:

//Optional parameter includeMargin is used when calculating outer dimensions  
(function ($) {
$.fn.getHiddenDimensions = function (includeMargin) {
    var $item = this,
    props = { position: 'absolute', visibility: 'hidden', display: 'block' },
    dim = { width: 0, height: 0, innerWidth: 0, innerHeight: 0, outerWidth: 0, outerHeight: 0 },
    $hiddenParents = $item.parents().andSelf().not(':visible'),
    includeMargin = (includeMargin == null) ? false : includeMargin;

    var oldProps = [];
    $hiddenParents.each(function () {
        var old = {};

        for (var name in props) {
            old[name] = this.style[name];
            this.style[name] = props[name];
        }

        oldProps.push(old);
    });

    dim.width = $item.width();
    dim.outerWidth = $item.outerWidth(includeMargin);
    dim.innerWidth = $item.innerWidth();
    dim.height = $item.height();
    dim.innerHeight = $item.innerHeight();
    dim.outerHeight = $item.outerHeight(includeMargin);

    $hiddenParents.each(function (i) {
        var old = oldProps[i];
        for (var name in props) {
            this.style[name] = old[name];
        }
    });

    return dim;
}
}(jQuery));