jQuery - 获取元素不可见时的宽度（显示：无）

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，使其显示在页面之外，使其不可见，然后测量它。如果随后将其隐藏并删除，用户将一无所知。

这里的其他一些答案只是隐藏了可见性，这有效，但它会在您的页面上占据一小部分空白。

例子：

$itemClone = $('.hidden-item').clone().css({
        'visibility': 'hidden',
        'position': 'absolute',
        'z-index': '-99999',
        'left': '99999999px',
        'top': '0px'
    }).appendTo('body');
var width = $itemClone.width();
$itemClone.remove();

Answer 2

我试图找到隐藏元素的工作函数，但我意识到 CSS 比每个人想象的要复杂得多。 CSS3 中有很多新的布局技术，可能不适用于以前的所有答案，例如灵活的框、网格、列甚至复杂父元素内的元素。

灵活盒示例

我认为唯一可持续的&简单的解决方案是实时渲染。那时，浏览器应该为您提供正确的元素大小。

遗憾的是，JavaScript 不提供任何直接事件来通知元素何时显示或隐藏。但是，我创建了一些基于 DOM 属性修改 API 的函数，这些函数将在元素可见性更改时执行回调函数。

$('[selector]').onVisibleChanged(function(e, isVisible)
{
    var realWidth = $('[selector]').width();
    var realHeight = $('[selector]').height();

    // render or adjust something
});

欲了解更多信息，请访问我的项目 GitHub。

https://github.com/Soul-Master/visible.event.js

演示：http://jsbin.com/ETiGIre/7

Answer 3

在获取宽度之前使父显示器显示，然后获取宽度，最后使父显示器隐藏。就像下面这样

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

Answer 4

一种解决方案（尽管并非在所有情况下都有效）是通过将不透明度设置为 0 来隐藏元素。完全透明的元素将具有宽度。

缺点是该元素仍然会占用空间，但这在所有情况下都不会成为问题。

例如：

$(img).css("opacity", 0)  //element cannot be seen
width = $(img).width()    //but has width

Answer 5

大多数解决方案忽略的最大问题是，CSS 经常根据元素在 html 中的作用域来更改元素的宽度。

如果我要通过将元素的克隆附加到主体来确定元素的 offsetWidth，当它具有仅适用于其当前范围的样式时，我会得到错误的宽度。

例如：

//css

.module-container .my-elem{
边框：60px 纯黑；
现在

，当我尝试在 body 上下文中确定 my-elem 的宽度时，它将超出 120px。您可以克隆模块容器，但您的 JS 不必知道这些详细信息。

我还没有测试过，但基本上 Soul_Master 的解决方案似乎是唯一可以正常工作的解决方案。但不幸的是，从实现来看，它的使用成本可能很高，而且性能不佳（这里介绍的大多数解决方案也是如此。）

如果可能的话，请使用visibility:hidden代替。这仍然会渲染元素，让您可以轻松计算宽度。

Answer 6

除了 蒂姆·班克斯发布的答案（随后解决了我的问题）之外，我还必须编辑一件简单的事情。

其他人可能也有同样的问题；我正在下拉菜单中使用 Bootstrap 下拉菜单。但此时文本可以比当前内容更宽（并且没有太多好的方法可以通过 css 解决这个问题）。

我使用：

$table.css({ position: "absolute", visibility: "hidden", display: "table" });

相反，它将容器设置为一个表，如果内容更宽，该表总是按宽度缩放。

Answer 7

jQuery(".megamenu li.level0 .dropdown-container .sub-column ul .level1").on("mouseover", function () {
    var sum = 0;
    jQuery(this).find('ul li.level2').each(function(){
    sum -= jQuery(this).height();
    jQuery(this).parent('ul').css('margin-top', sum / 1.8);
    console.log(sum);
    });
});

悬停时我们可以计算列表项的高度。

Answer 8

正如之前所说，克隆并附加到其他地方的方法不能保证相同的结果，因为样式可能不同。

下面是我的方法。它沿着父级查找负责隐藏的父级，然后暂时取消隐藏以计算所需的宽度、高度等。

    var width = parseInt($image.width(), 10);
    var height = parseInt($image.height(), 10);

    if (width === 0) {

        if ($image.css("display") === "none") {

            $image.css("display", "block");
            width = parseInt($image.width(), 10);
            height = parseInt($image.height(), 10);
            $image.css("display", "none");
        }
        else {

            $image.parents().each(function () {

                var $parent = $(this);
                if ($parent.css("display") === "none") {

                    $parent.css("display", "block");
                    width = parseInt($image.width(), 10);
                    height = parseInt($image.height(), 10);
                    $parent.css("display", "none");
                }
            });
        }
    }

Answer 9

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

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

这有点像黑客，但似乎对我来说效果很好。

更新

我已经写了涵盖此主题的博客文章。上面使用的方法可能会出现问题，因为您将 CSS 属性重置为空值。如果他们以前有价值观怎么办？更新后的解决方案使用 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));

Answer 10

function realWidth(obj){
    var clone = obj.clone();
    clone.css("visibility","hidden");
    $('body').append(clone);
    var width = clone.outerWidth();
    clone.remove();
    return width;
}
realWidth($("#parent").find("table:first"));

Answer 11

根据罗伯茨的回答，这是我的功能。
如果元素或其父元素已通过 jQuery 淡出，这对我有用，可以获取内部或外部尺寸，还可以返回偏移值。

/edit1：重写函数。它现在更小，可以直接在对象

/edit2 上调用：该函数现在将在原始元素而不是主体之后插入克隆，从而使克隆可以保持继承的尺寸。

$.fn.getRealDimensions = function (outer) {
    var $this = $(this);
    if ($this.length == 0) {
        return false;
    }
    var $clone = $this.clone()
        .show()
        .css('visibility','hidden')
        .insertAfter($this);        
    var result = {
        width:      (outer) ? $clone.outerWidth() : $clone.innerWidth(), 
        height:     (outer) ? $clone.outerHeight() : $clone.innerHeight(), 
        offsetTop:  $clone.offset().top, 
        offsetLeft: $clone.offset().left
    };
    $clone.remove();
    return result;
}

var dimensions = $('.hidden').getRealDimensions();

Answer 12

感谢您发布上面的 realWidth 函数，它真的对我很有帮助。
基于上面的“realWidth”函数，我写了一个CSS重置（原因如下所述）。

function getUnvisibleDimensions(obj) {
    if ($(obj).length == 0) {
        return false;
    }

    var clone = obj.clone();
    clone.css({
        visibility:'hidden',
        width : '',
        height: '',
        maxWidth : '',
        maxHeight: ''
    });
    $('body').append(clone);
    var width = clone.outerWidth(),
        height = clone.outerHeight();
    clone.remove();
    return {w:width, h:height};
}

“realWidth”获取现有标签的宽度。我用一些图像标签对此进行了测试。问题是，当图像给出了每个宽度（或最大宽度）的 CSS 尺寸时，您将永远无法获得该图像的真实尺寸。也许，img 具有“max-width：100％”，“realWidth”函数克隆它并将其附加到正文。
如果图像的原始尺寸大于身体，那么您得到的是身体的尺寸，而不是该图像的实际尺寸。