2009-04-19 7 views
20

内の要素のオーバーフロー幅を取得するにはどうすればそうWebページ

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

私は動的に子の内容を更新するとjQueryを使用してそれをスクロールてるよう2つのdivを持っています。私はスクロールを止めるときを知っているので、子供がどのくらい広がっているかを知ることができるようにしたいと思います。問題は、オーバーフローしたコンテンツが存在すると子供の実際の幅が画面よりも広いことです(現在のテストコンテンツでは約2500ピクセルと思われます)。要素の境界線が設定されている場合、要素の境界線がコンテンツの実際の幅に及ばない場合、テキストは境界線を越えてオー​​バーフローします。 jQuerys $('#child').widthclientWidthscrollWidth(おかげでbobince)とoffsetWidthプロパティ(私のモニターの幅である)1024px全く最大アウトを使用して

。どのようにして、要素の内容がオーバーフローをどの程度含んでいるかを知る方法を知っていますか?それが助けてくれれば、私が構築しているアプリはキオスク型の環境で動作するので、Firefoxのみ(夜間バージョンでも)の解決策は問題ありません。

更新:scrollWidth親の作品では、私はもっと慎重に読んでいたはずです、もう一度bobinceをありがとう。

答えて

25
document.getElementById('parent').scrollWidth 

scrollWidth歴史的にあまりoffsetWidthより支持されたIEの拡張です。しかし、今日では、現代のデスクトップブラウザーにはすべてが含まれています。 jQueryのを使用して

+0

私はscrollWithが同様1024pxで限界いっぱいまでされて怖いです。しかし、提案をありがとう。 –

+0

FF3で私のために働く - 動作しない完全なコードサンプルを投稿しますか? '子'ではなく 'parent' scrollWidthを確認していて、幅が大きすぎるコンテンツは自然に1024でラップされません(または停止するには '白い空白:折り返し'を使用しないでください)。最後に構文をチェックしてください - あなたの例では、ルール間にセミコロンの代わりにコロンがあります。 – bobince

+0

ああ、親は、そのビットを逃した、それは動作します!どうもありがとうございました。 –

4

、あなたが行うことができます:

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

jQuery要素配列から0番目の要素を引き出すと、上記の答えと同じDOMノードが返されます( 'document.getElementById( 'parent')。scrollWidth')。利点は、 'scrollWidth'がjQueryなしできれいに実行できることです。 – Hans