jquery - Javascript: Getting the width of child-elements - Stack Overflow

admin管理员组

文章数量:1026701

I have two stacked divs.

The outer div has a fixed width with overflow hidden.

The inner div has content that in total can be larger than the outher div.

How can I get the total width of the content of the inner div?

<div id='outer' style='width:100px'>
    <div id='inner'>
        content
    </div>
</div>

When I try $('#inner').width() and the content is larger than outer, it will return the width of the outer div.

I am using Chrome.

/

I have two stacked divs.

The outer div has a fixed width with overflow hidden.

The inner div has content that in total can be larger than the outher div.

How can I get the total width of the content of the inner div?

<div id='outer' style='width:100px'>
    <div id='inner'>
        content
    </div>
</div>

When I try $('#inner').width() and the content is larger than outer, it will return the width of the outer div.

I am using Chrome.

http://jsfiddle/4syEJ/

• javascript
• jquery
• html
• css
• width

Share Improve this question Follow asked Feb 10, 2013 at 17:31 Edmund MoshammerEdmund Moshammer 68888 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can get the .scrollWidth of the parent, which will return what you want.

document.getElementById('outer').scrollWidth

http://jsfiddle/4syEJ/3/

Try :

<div id="outer" style="width:100px">
    <div id="inner">
        <p id="content">content</p>
    </div>
</div>

And

$('#content').width();

you can use .children() jquery selector like this:

$('#info').html($('#box1').children().width(); 
$('#box2').children().width(); 
$('#box3').width());

http://jsfiddle/4syEJ/2/

I have two stacked divs.

The outer div has a fixed width with overflow hidden.

The inner div has content that in total can be larger than the outher div.

How can I get the total width of the content of the inner div?

<div id='outer' style='width:100px'>
    <div id='inner'>
        content
    </div>
</div>

When I try $('#inner').width() and the content is larger than outer, it will return the width of the outer div.

I am using Chrome.

/

I have two stacked divs.

The outer div has a fixed width with overflow hidden.

The inner div has content that in total can be larger than the outher div.

How can I get the total width of the content of the inner div?

<div id='outer' style='width:100px'>
    <div id='inner'>
        content
    </div>
</div>

When I try $('#inner').width() and the content is larger than outer, it will return the width of the outer div.

I am using Chrome.

http://jsfiddle/4syEJ/

• javascript
• jquery
• html
• css
• width

Share Improve this question Follow asked Feb 10, 2013 at 17:31 Edmund MoshammerEdmund Moshammer 68888 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can get the .scrollWidth of the parent, which will return what you want.

document.getElementById('outer').scrollWidth

http://jsfiddle/4syEJ/3/

Try :

<div id="outer" style="width:100px">
    <div id="inner">
        <p id="content">content</p>
    </div>
</div>

And

$('#content').width();

you can use .children() jquery selector like this:

$('#info').html($('#box1').children().width(); 
$('#box2').children().width(); 
$('#box3').width());

http://jsfiddle/4syEJ/2/

本文标签： jqueryJavascript Getting the width of childelementsStack Overflow