当一个元素中有绝对定位的子元素时，获取该元素的全宽

Get full width of an element when it has absolutely positioned child elements inside it

本文关键字：元素获取定位一个更新时间：2023-09-26

JS Fiddle：http://jsfiddle.net/meYnS/3/

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

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

但是，我如何才能获得外部元素的全宽（由于绝对定位的子元素，它显然大于100）？

有没有内置的方法，或者我必须手动计算（即将每个子宽度添加到父宽度以计算出全宽度）？

您可以使用属性scrollWidth、scrollHeight。

如果您使用的是jQuery，

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

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

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

get（）是一种用于实现DOM元素的方法。

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

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