get total width of children elements

Question

I have some HTML tags:

<div id="container">
   <input type="text" id="a">
   <textarea id="b"></textarea>
   <div id="c" style="width:200px"></div>
   <div id="d" style="width:20%"></div>
</div>

#a and #b have no css width attribute. How could I calculate the total width of container's children elements in pixel?

score 18 · Accepted Answer · edited Apr 10 '22 at 06:09

18

Without jQuery, go this way:

var children = document.getElementById('container').children;
var totalWidth = 0;

for (var i = 0; i < children.length; i++) {
    totalWidth += parseInt(children[i].offsetWidth, 10);
}

To check whether you need offsetWidth or something else see
Stackoverflow - Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

edited Apr 10 '22 at 06:09

Tim

6,281
3
39
49

answered May 07 '14 at 14:56

Andy

3,997
2
19
39

Vladimir Saveliev · Answer 2 · 2020-10-22T12:27:36.250

2

This code is shorter and use vanilla-js:

const el = document.querySelector('.some-el')
const totalWidth = Object.values(el.childNodes).reduce((total, i) => total + i.offsetWidth, 0)
console.log(totalWidth)

edited Oct 22 '20 at 12:27

answered Oct 21 '20 at 07:40

Vladimir Saveliev

41
3

1

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel Oct 21 '20 at 10:11

display-name-is-missing · Answer 3 · 2014-05-07T15:26:59.527

0

With jQuery, you can do it like this:

var width = 0;

$('#container').children().each(function () {
    width += $(this).outerWidth(); 
    // change to .outerWidth(true) if you want to calculate margin too.
});


console.log(width);

edited May 07 '14 at 15:26

answered May 07 '14 at 14:48

display-name-is-missing

4,424
5
28
41

1

I've tried your method. However, it didn't calculate the default width of `#a` and `#b`. – Lewis May 07 '14 at 15:12

score 0 · Answer 4 · answered Apr 10 '22 at 06:27

0

var totalWidth = 0;
document.querySelectorAll('#container > *').forEach(function(child) {
  totalWidth += parseInt(child.offsetWidth, 10);
});

console.log('Total Width: ', totalWidth);

<div id="container">
   <input type="text" id="a">
   <textarea id="b"></textarea>
   <div id="c" style="width:200px"></div>
   <div id="d" style="width:20%"></div>
</div>

answered Apr 10 '22 at 06:27

Huynh Trong Hieu

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 10 '22 at 08:52

get total width of children elements

4 Answers4