jQuery-在不可见时获取元素的宽度(显示:无) [英] jQuery - Get Width of Element when Not Visible (Display: None)

问题描述

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

It seems like in jQuery when an element is not visible width() returns 0. Makes sense, but I need to get the width of a table in order to set the width of the parent before I show the parent.

如下所述，在父级中有文本，使父级偏斜并且看上去很讨厌.我希望父母只和桌子一样宽，并且要有文字换行.

As noted below, there is text in the parent, that makes the parent skew and look nasty. I want the parent to be only as wide as the table and have the text wrap.

<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:

Javascript:

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

tableWidth总是返回0，因为它不可见(我想是因为它在可见时给了我一个数字).有没有一种方法可以在不使父对象可见的情况下获得表格的宽度?

tableWidth always returns 0 since it is not visible (is my guess since it gives me a number when visible). Is there a way to get the width of the table without making the parent visible?

推荐答案

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

Here is a trick I have used. It involves adding some CSS properties to make jQuery think the element is visible, but in fact it is still hidden.

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

这是一种破解，但对我来说似乎很好.

It is kind of a hack, but it seems to work fine for me.

更新

此后，我写了一个博客帖子.由于将CSS属性重置为空值，因此上面使用的方法可能会出现问题.如果他们以前有价值观怎么办?更新后的解决方案使用了jQuery源代码中找到的swap()方法.

I have since written a blog post that covers this topic. The method used above has the potential to be problematic since you are resetting the CSS properties to empty values. What if they had values previously? The updated solution uses the swap() method that was found in the jQuery source code.

引用的博客文章中的代码:

Code from referenced blog post:

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

这篇关于jQuery-在不可见时获取元素的宽度(显示:无)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！