jQuery -获取不可见时元素的宽度(显示:无)
jQuery -获取不可见时元素的宽度(显示:无)
提问于 2009-09-24 15:05:11
就像在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，因为它是不可见的(这是我的猜测，因为它在可见时会给我一个数字)。有没有办法在不让父元素可见的情况下获得表的宽度？
回答 10
Stack Overflow用户
发布于 2012-07-04 00:06:18
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"));Stack Overflow用户
发布于 2012-12-10 14:21:07
根据Roberts的回答，这是我的函数。如果元素或其父元素已经通过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();Stack Overflow用户
发布于 2012-08-25 01:30:16
感谢你发布了上面的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“函数克隆它并将其附加到正文中。如果图像的原始大小大于身体，那么你得到的是身体的大小，而不是图像的真实大小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1472303
复制相关文章
相似问题
腾讯云开发者
