计算带有隐藏图像的 div 的总宽度答案

【问题标题】：Calculating total width of div with hidden images计算带有隐藏图像的 div 的总宽度
【发布时间】：2017-03-15 04:44:18
【问题描述】：

我正在尝试用 10 个宽度为 200 像素的图像计算 div 的宽度。

但是图像在 css 中有 overflow: hidden。我相信这意味着我无法获得正确的宽度值。你知道我怎样才能得到正确的 2000 像素值而不是视口宽度吗？

这是一个代码笔示例：

【问题讨论】：

谢谢。我知道一个解决方案，因为图像都具有相同的大小。我只是希望我能找到一种更“模块化”的方法，让我可以重用该功能。
如果你的 css 是固定的（错字），就我所见codepen.io/anon/pen/PpKRXd?editors=1111 white-space & padding 也包括在计算中：2096px 返回
...如果您将 font-size 设置为 0，则返回 2060px，而空白消失缩小为 0 codepen.io/anon/pen/gmxzaQ?editors=1111
感谢 cmets，它似乎正在工作。在使用 Chrome 时，即使它正在工作，我有时也会得到错误的答案。不知道为什么。关于空白的好提示！
出于一个有趣的原因，css中的tipo混淆了脚本，而下面Masiama的答案并不关心它;)

【解决方案1】：

$('.scrollmenu')[0].scrollWidth

【讨论】：

仍然 padding: 3x css 应该固定为 padding: 3px; ;)
您可以通过计算所有子块的宽度来计算块的宽度var width = 0; Array.from($('.scrollmenu').children()).map(child => { width += child.scrollWidth; })