CODEWITHSUNDEEP
javascriptjquerywidthmeasure
Lewis
Lewis

Reputation: 14926

get total width of children elements

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?

Upvotes: 3

Views: 17790

Answers (4)

Huynh Trong Hieu
Huynh Trong Hieu

Reputation: 1

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>

Upvotes: 0

Andy
Andy

Reputation: 4107

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

Upvotes: 18

Vladimir Saveliev
Vladimir Saveliev

Reputation: 81

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)

Upvotes: 2

display-name-is-missing
display-name-is-missing

Reputation: 4409

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);

Upvotes: 0

Related Questions