获取子元素的总宽度

Question

我有一些 HTML 标签：

<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和#b没有 css 宽度属性。 我如何计算container的子元素的总宽度（以像素为单位）？

Answer 1

如果没有 jQuery，请这样做：

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

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

要检查您是否需要offsetWidth或其他内容，请参阅
Stackoverflow - 分别理解 offsetWidth、clientWidth、scrollWidth 和 -Height

Answer 2

此代码较短并使用 vanilla-js：

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

Answer 3

使用 jQuery，你可以这样做：

var width = 0;

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


console.log(width);

Answer 4

 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>