首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery -获取不可见时元素的宽度(显示:无)

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

Stack Overflow用户
提问于 2009-09-24 15:05:11
回答 10查看 131.8K关注 0票数 112

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

如下所示,父级中有文本,这使得父级倾斜,看起来很糟糕。我希望父元素的宽度和表格一样宽,并让文本换行。

代码语言:javascript
复制
<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:

代码语言:javascript
复制
#parent
{
    display: none;
}

Javascript:

代码语言:javascript
复制
var tableWidth = $('#parent').children('table').outerWidth();
if (tableWidth > $('#parent').width())
{
    $('#parent').width(tableWidth);
}

tableWidth总是返回0,因为它是不可见的(这是我的猜测,因为它在可见时会给我一个数字)。有没有办法在不让父元素可见的情况下获得表的宽度?

EN

回答 10

Stack Overflow用户

发布于 2012-07-04 00:06:18

代码语言:javascript
复制
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"));
票数 41
EN

Stack Overflow用户

发布于 2012-12-10 14:21:07

根据Roberts的回答,这是我的函数。如果元素或其父元素已经通过jQuery淡出,可以获得内部或外部尺寸并返回偏移值,则此方法适用于我。

/edit1:重写函数。它现在更小了,可以直接在对象上调用

/edit2:该函数现在将克隆插入到原始元素之后,而不是主体之后,这使得克隆可以保持继承的维度。

代码语言:javascript
复制
$.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();
票数 8
EN

Stack Overflow用户

发布于 2012-08-25 01:30:16

感谢你发布了上面的realWidth函数,它对我真的很有帮助。基于上面的"realWidth“函数,我写了一个CSS重置,(原因如下)。

代码语言:javascript
复制
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“函数克隆它并将其附加到正文中。如果图像的原始大小大于身体,那么你得到的是身体的大小,而不是图像的真实大小。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1472303

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档