简体   繁体   English

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

[英]How to get the overflowed width of an element in a webpage

I have two divs like so 我有两个这样的div

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

I'm dynamically updating the content of child and scrolling it using jQuery. 我正在动态更新子内容并使用jQuery滚动它。 I would like to be able to find how wide the child is so I know when to stop scrolling. 我希望能够找到孩子有多宽,所以我知道何时停止滚动。 The problem is that the child's actual width once the overflowed content is present, is wider than even the screen (seems to be about 2500 pixels with the current test content). 问题是,一旦溢出的内容存在,孩子的实际宽度甚至比屏幕宽(使用当前测试内容似乎大约2500像素)。 The border of the element, if its set, does not extend to the actual width of the content, the text overflows beyond the visible border. 元素的边界(如果其集合)不会扩展到内容的实际宽度,文本溢出可见边框。

Using jQuerys $('#child').width , the clientWidth , scrollWidth (thanks bobince) and offsetWidth properties all max out at 1024px (which is the width of my monitor). 使用jQuerys $('#child').widthclientWidthscrollWidth (thanks bobince)和offsetWidth属性都是1024px(这是我的监视器的宽度)的最大值。 Does any one know of any way to find out how wide the elements content is including the overflow? 有没有人知道如何找出包含溢出的元素内容有多宽? If it helps, The app I am building will run in a kiosk type environment, so a Firefox only (even a nightly version) solution is fine. 如果它有帮助,我正在构建的应用程序将在kiosk类型环境中运行,因此只有Firefox(甚至是夜间版本)解决方案也没问题。

Update: scrollWidth on the parent works, I should have read more carefully, thank you again bobince. 更新:父作品上的scrollWidth ,我应该仔细阅读,再次感谢bobince。

document.getElementById('parent').scrollWidth

scrollWidth is an IE extension that historically was less well supported than offsetWidth. scrollWidth是一个IE扩展,历史上支持不如offsetWidth。 However nowadays all the modern desktop browsers include it. 但是现在所有的现代桌面浏览器都包含它。

使用JQuery,您可以:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM