如何获取网页中元素的溢出宽度

Question

我有两个这样的div

<div id="parent" style="width:100px:overflow:hidden;">
    <div id="child"> 
      tooooooooooooooooooooo much content to fit in parent
    </div>
</div>

我正在动态更新子内容并使用jQuery滚动它.我希望能够找到孩子有多宽,所以我知道何时停止滚动.问题是,一旦溢出的内容存在,孩子的实际宽度甚至比屏幕宽(使用当前测试内容似乎大约2500像素).元素的边界(如果其集合)不会扩展到内容的实际宽度,文本溢出可见边框.

使用jQuerys $('#child').width的clientWidth,scrollWidth(感谢bobince)和offsetWidth性能都最大程度的发挥在1,024像素(这是我的显示器的宽度).有没有人知道如何找出包含溢出的元素内容有多宽？如果它有帮助,我正在构建的应用程序将在kiosk类型的环境中运行,因此只有Firefox(甚至是夜间版本)解决方案也没问题.

更新:scrollWidth关于父作品,我应该仔细阅读,再次感谢bobince.

Answer 1

document.getElementById('parent').scrollWidth

scrollWidth是一个IE扩展,历史上支持不如offsetWidth.但是现在所有的现代桌面浏览器都包含它.

Answer 2

使用JQuery,您可以:

$('#parent')[0].scrollWidth