如何获取网页中元素的溢出宽度 [英] How to get the overflowed width of an element in a webpage

问题描述

我有两个div像这样

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

我动态更新child的内容并使用jQuery滚动它。我想要能够找到多大的孩子是所以我知道什么时候停止滚动。问题是，一旦溢出的内容存在，孩子的实际宽度，甚至比屏幕更宽（似乎是约2500像素与当前的测试内容）。元素的边框（如果其设置）不会延伸到内容的实际宽度，则文本溢出到可见边框之外。

I'm dynamically updating the content of child and scrolling it using 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). 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.

使用jQuerys $（'＃child'）。width ， clientWidth ， scrollWidth 感谢bobince）和 offsetWidth 属性所有最大在1024px（这是我的显示器的宽度）。有没有人知道任何方式来找出元素内容包括溢出有多宽？如果它有帮助，我正在建设的应用程序将运行在一个信息亭类型的环境，所以一个只有Firefox（甚至每晚的版本）的解决方案是可以的。

Using jQuerys $('#child').width , the clientWidth, scrollWidth (thanks bobince) and offsetWidth properties all max out at 1024px (which is the width of my monitor). 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.

更新： scrollWidth 对父作品，我应该更仔细阅读，再次感谢bobince。

Update: scrollWidth on the parent works, I should have read more carefully, thank you again bobince.

推荐答案

document.getElementById('parent').scrollWidth

scrollWidth 是一个IE扩展程序，历史上支持不如offsetWidth。但是现在所有的现代桌面浏览器都包括它。

scrollWidth is an IE extension that historically was less well supported than offsetWidth. However nowadays all the modern desktop browsers include it.

这篇关于如何获取网页中元素的溢出宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！