当元素内有绝对定位的子元素时获取元素的全宽答案

【问题标题】：Get full width of an element when it has absolutely positioned child elements inside it当元素内有绝对定位的子元素时获取元素的全宽
【发布时间】：2012-08-21 13:00:42
【问题描述】：

JS 小提琴：http://jsfiddle.net/meYnS/3/

假设我有一个元素 .outer，宽度为 100 像素，position:relative;。它有一个包含position:absolute; 和left:95px; 的内部元素。 IE。子元素超过了父元素的宽度。

现在，在 JQUery 中，如果我尝试使用 $('.outer').outerWidth(); 获取父级的宽度，它会返回 100。

但是如何获取外部元素的全宽（显然大于 100，因为绝对定位的子元素）？

是否有内置方法或者我必须进行手动计算（即将每个子宽度添加到父宽度以计算出整个宽度）？

【问题讨论】：

最后一个选项，恐怕。唯一更简单的方法是编写一个递归函数来检查所有孩子（直到最深）并返回顶部和左侧的最小数字，右侧和底部的最大数字。

标签： javascript jquery html css

【解决方案1】：

您可以使用属性scrollWidth、scrollHeight。

如果你使用的是 jQuery，

$('.outer').get(0).scrollWidth

【讨论】：

太棒了！似乎适用于我的示例：jsfiddle.net/gsZL9/1 然而，应该注意的是，虽然它确实计算了 Veera 的要求，但 .outer 元素本身仍以 100px 宽呈现。
当您将其定位设置为relative 时，它不会自动调整大小。你已经编写代码来做到这一点。

【解决方案2】：

您已将宽度设置为 100 像素，并且子元素是绝对定位的，因此不会影响其父元素的宽度。父级的宽度仍然是真正的 100px。

【讨论】：

我的感觉，也是。如果子元素是绝对定位的，则它们不会增长父元素。如果您临时修改您的 CSS 以在它们周围设置边框，您可能会看到孩子超出了父母的范围，而不是成长。
小提琴显示当孩子绝对定位时父母不会成长：jsfiddle.net/gsZL9

【解决方案3】：

jQuery 不提供对 javascript 属性 scrollWidth 的访问，因此您必须使用 jQuery 访问 DOM 元素。

jQuery.get()是你实现DOM元素的方法。

因此，使用jQuery的解决方案是$('.outer').get(0).scrollWidth

如果您使用原始 javascript，则解决方案是 document.getElementsByClassName('outer')[0].scrollWidth

【讨论】：