blocks|key|1231149|text|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"));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1231150|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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"));
</code></pre>

blocks|key|1231239|text|感谢你发布了上面的realWidth函数，它对我真的很有帮助。基于上面的"realWidth“函数，我写了一个CSS重置，(原因如下)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1231240|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};
}|code-block|syntax|javascript|1231241|"realWidth“获取现有标签的宽度。我用一些图像标签对此进行了测试。问题是，当图像具有每宽度(或最大宽度)的CSS尺寸时，您将永远无法获得该图像的真实尺寸。也许，img有"max-width:+100%25"，"realWidth“函数克隆它并将其附加到正文中。如果图像的原始大小大于身体，那么你得到的是身体的大小，而不是图像的真实大小。|1231242|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Thank you for posting the realWidth function above, it really helped me. 
Based on "realWidth" function above, I wrote, a CSS reset, (reason described below).

<pre><code>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};
}
</code></pre>

"realWidth" gets the width of an existing tag. I tested this with some image tags. The problem was, when the image has given CSS dimension per width (or max-width), you will never get the real dimension of that image. Perhaps, the img has "max-width: 100%", the "realWidth" function clone it and append it to the body. 
If the original size of the image is bigger than the body, then you get the size of the body and not the real size of that image.

blocks|key|1231312|text|根据Roberts的回答，这是我的函数。如果元素或其父元素已经通过jQuery淡出，可以获得内部或外部尺寸并返回偏移值，则此方法适用于我。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1231313|/edit1:重写函数。它现在更小了，可以直接在对象上调用|1231314|/edit2:该函数现在将克隆插入到原始元素之后，而不是主体之后，这使得克隆可以保持继承的维度。|1231315|$.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();|code-block|syntax|javascript|1231316|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Based on Roberts answer, here is my function.
This works for me if the element or its parent have been faded out via jQuery, can either get inner or outer dimensions and also returns the offset values.

/edit1: rewrote the function. it's now smaller and can be called directly on the object

/edit2: the function will now insert the clone just after the original element instead of the body, making it possible for the clone to maintain inherited dimensions.

<pre><code>$.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();
</code></pre>

blocks|key|1446288|text|除了the+answer+posted+by+Tim+Banks之外，为了解决我的问题，我还必须编辑一件简单的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1446289|其他人可能也有同样的问题；我正在使用下拉菜单中的Bootstrap下拉菜单。但是在这一点上，文本可以比当前内容更宽(通过css解决这个问题的好方法并不多)。|1446290|我使用：|1446291|$table.css({+position:+"absolute",+visibility:+"hidden",+display:+"table"+});|code-block|syntax|javascript|1446292|相反，它将容器设置为一个表格，如果内容更宽，该表格将始终缩放宽度。|1446293|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/1472385/366904^0|2|U|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

In addition to <a href="https://stackoverflow.com/a/1472385/366904">the answer posted by Tim Banks</a>, which followed to solving my issue I had to edit one simple thing.

Someone else might have the same issue; I'm working with a Bootstrap dropdown in a dropdown. But the text can be wider as the current content at this point (and there aren't many good ways to resolve that through css).

I used: 

<pre><code>$table.css({ position: "absolute", visibility: "hidden", display: "table" });
</code></pre>

instead, which sets the container to a table which always scales in width if the contents are wider.

blocks|key|1231464|text|在获取宽度之前，使父显示显示，然后获取宽度，最后使父显示隐藏。就像下面这样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1231465|$('#parent').show();
var+tableWidth+=+$('#parent').children('table').outerWidth();
+$('#parent').hide();
if+(tableWidth+>+$('#parent').width())
{
++++$('#parent').width()+=+tableWidth;
}|code-block|syntax|javascript|1231466|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Before take the width make the parent display show ,then take the width and finally make the parent display hide. Just like following 

<pre><code>$('#parent').show();
var tableWidth = $('#parent').children('table').outerWidth();
 $('#parent').hide();
if (tableWidth &gt; $('#parent').width())
{
 $('#parent').width() = tableWidth;
}
</code></pre>

blocks|key|1446396|text|这里大多数解决方案忽略的最大问题是，CSS通常会根据元素在html中的作用域位置来更改元素的宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1446397|如果我通过将元素的克隆附加到offsetWidth来确定元素的宽度，而该元素的样式仅适用于其当前作用域，那么我将获得错误的宽度。|1446398|例如：|1446399|//css|1446400|..module+container+.my-elem{边框:+60px纯黑；}|1446401|现在，当我尝试在body的上下文中确定-elem的宽度时，它会超出120px。你可以克隆模块容器，但是你的JS不应该知道这些细节。|1446402|我还没有测试过它，但基本上Soul_Master的解决方案似乎是唯一可以正常工作的解决方案。但不幸的是，从实现上看，它的使用成本可能会很高，而且对性能也不好(这里给出的大多数解决方案也是如此)。|1446403|如果可能，请使用visibility:+hidden。这仍将呈现元素，允许您计算宽度，而无需大惊小怪。|1446404|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|W|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|X|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

The biggest issue being missed by most solutions here is that an element's width is often changed by CSS based on where it is scoped in html.

If I was to determine offsetWidth of an element by appending a clone of it to body when it has styles that only apply in its current scope I would get the wrong width.

for example:

//css

.module-container .my-elem{
 border: 60px solid black;
}

now when I try to determine my-elem's width in context of body it will be out by 120px. You could clone the module container instead, but your JS shouldn't have to know these details.

I haven't tested it but essentially Soul_Master's solution appears to be the only one that could work properly. But unfortunately looking at the implementation it will likely be costly to use and bad for performance (as most of the solutions presented here are as well.)

If at all possible then use visibility: hidden instead. This will still render the element, allowing you to calculate width without all the fuss.

blocks|key|1446423|text|一种解决方案，虽然它不是在所有情况下都有效，是通过设置不透明度为0来隐藏元素。一个完全透明的元素将具有宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1446424|缺点是元素仍然会占用空间，但这在所有情况下都不是问题。|1446425|例如：|1446426|$(img).css("opacity",+0)++//element+cannot+be+seen
width+=+$(img).width()++++//but+has+width|code-block|syntax|javascript|1446427|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

One solution, though it won't work in all situations, is to hide the element by setting the opacity to 0. A completely transparent element will have width. 

The draw back is that the element will still take up space, but that won't be an issue in all cases. 

For example:

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

blocks|key|1446462|text|如果您需要隐藏的东西的宽度，但由于某种原因无法将其取消隐藏，您可以克隆它，更改CSS使其显示在页面之外，使其不可见，然后测量它。如果它被隐藏并在之后被删除，用户将不会更明智。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1446463|这里的一些其他答案只是隐藏了可见性，这是可行的，但它会在你的页面上占据一个空白点不到一秒钟。|1446464|示例：|1446465|$itemClone+=+$('.hidden-item').clone().css({
++++++++'visibility':+'hidden',
++++++++'position':+'absolute',
++++++++'z-index':+'-99999',
++++++++'left':+'99999999px',
++++++++'top':+'0px'
++++}).appendTo('body');
var+width+=+$itemClone.width();
$itemClone.remove();|code-block|syntax|javascript|1446466|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you need the width of something that's hidden and you can't un-hide it for whatever reason, you can clone it, change the CSS so it displays off the page, make it invisible, and then measure it. The user will be none the wiser if it's hidden and deleted afterwards.

Some of the other answers here just make the visibility hidden which works, but it will take up a blank spot on your page for a fraction of a second.

Example:

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

blocks|key|1446495|text|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);
++++});
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1446496|在悬停时，我们可以计算列表项高度。|unstyled|1446497|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>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);
 });
});
</code></pre>

On hover we can calculate the list item height.

blocks|key|1446527|text|正如前面所说的，克隆和附加到其他地方的方法不能保证相同的结果，因为样式可能不同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1446528|下面是我的方法。它遍历父母寻找负责隐藏的父母，然后暂时取消隐藏，以计算所需的宽度、高度等。|1446529|​|1446530|++++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");
++++++++++++++++}
++++++++++++});
++++++++}
++++}|code-block|syntax|javascript|1446531|1446532|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Q|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

As has been said before, the clone and attach elsewhere method does not guarantee the same results as styling may be different.

Below is my approach. It travels up the parents looking for the parent responsible for the hiding, then temporarily unhides it to calculate the required width, height, etc.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> 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");
 }
 });
 }
 }</code></pre>
</div>
</div>

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.

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

CSS:

<pre><code>#parent
{
 display: none;
}
</code></pre>

Javascript:

<pre><code>var tableWidth = $('#parent').children('table').outerWidth();
if (tableWidth &gt; $('#parent').width())
{
 $('#parent').width(tableWidth);
}
</code></pre>

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?

jQuery - Get Width of Element when Not Visible (Display: None)

就像在jQuery中，当一个元素不可见时，width()返回0。这是有道理的，但我需要获取表的宽度，以便在显示父对象之前设置父对象的宽度。如下所示，父级中有文本，这使得父级倾斜，看起来很糟糕。我希望父元素的宽度和表格一样宽，并让文本换行。<div id="parent"> Text here ... Can ge...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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