javascript - Get full width of an element when it has absolutely positioned child elements inside it - Stack Overflow

admin管理员组

文章数量:1297058

JS Fiddle: /

Lets say I have an element .outer with 100px width and position:relative;. It has an inner element which has position:absolute; and left:95px;. I.e. the child element exceeds the width of the parent element.

Now, in JQUery, if I try to get the width of the parent using $('.outer').outerWidth(); it return 100.

But how can I get the full width of the outer element (which is obviously greater than 100, because of the absolutely positioned child element)?

Is there a built-in way or do I have to do a manual calculation (i.e. adding each child width to parent width to figure out the full width)?

JS Fiddle: http://jsfiddle/meYnS/3/

Lets say I have an element .outer with 100px width and position:relative;. It has an inner element which has position:absolute; and left:95px;. I.e. the child element exceeds the width of the parent element.

Now, in JQUery, if I try to get the width of the parent using $('.outer').outerWidth(); it return 100.

But how can I get the full width of the outer element (which is obviously greater than 100, because of the absolutely positioned child element)?

Is there a built-in way or do I have to do a manual calculation (i.e. adding each child width to parent width to figure out the full width)?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Aug 21, 2012 at 4:32 VeeraVeera 33.2k3636 gold badges100100 silver badges138138 bronze badges 1

• The last option, I'm afraid. The only easier way would be to write a recursive function to check all the children (until the deepest) and return the smallest number for top and left, greatest number for right and bottom. – inhan Commented Aug 21, 2012 at 4:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You can use the properties scrollWidth, scrollHeight.

If you are using jQuery,

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

You've set the width at 100px and the child element is positioned absolute, so it will not affect the width of the its parent. The parent's width is still truly 100px.

jQuery does not provide an access to the javascript property scrollWidth, so you have to access a DOM element using jQuery.

jQuery.get() is a method for you to achieve a DOM element.

therefore, the solution using jQuery is $('.outer').get(0).scrollWidth

If you use origin javascript, the solution would be document.getElementsByClassName('outer')[0].scrollWidth

本文标签：