如何获取网页中元素的宽度 [英] 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>

我正在动态更新小孩的内容并使用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 属性全部最大为1024像素（这是我的显示器的宽度）。有没有人知道有什么方法来了解元素内容包含溢出的范围？如果它有帮助，我正在构建的应用程序将在一个信息亭类型的环境中运行，因此只有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屋！