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

Question

假设我有一个.outer100px 宽度和position:relative;. 它有一个内部元素，它有position:absolute;和left:95px;。即子元素超过了父元素的宽度。

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

但是我怎样才能得到外部元素的全宽（显然大于 100，因为绝对定位的子元素）？

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

score 6 · Accepted Answer

您可以使用属性scrollWidth, scrollHeight。

如果您使用的是 jQuery，

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

score 3 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

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

3 回答 3