divのクリップされた領域を含むdivの高さを取得するにはどうすればよいですか？クリップされたDIVの高さを取得
<div style="height: 20px; overflow: hidden">
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
</div>
さて、あなたはそのように行うことはできませんが、このように、あなたのコンテナに内部要素を追加するとき、それは可能です：
<div id="element" style="height: 20px; overflow: hidden;">
<p id="innerElement"> <!-- notice this inner element -->
content<br />content<br />content<br />
content<br />content<br />content<br />
content<br />content<br />content<br />
</p>
</div>
追記：段落内のラッピングコンテンツあまりにも良い習慣です、プラスその1つの余分な要素がその...すべてであれば、問題の多く
とJavaScriptを与えていません。
var innerHeight = document.getElementById('innerElement').offsetHeight;
alert(innerHeight);
P.S.このJavaScriptを動作させるには、#element divの後ろに置いてください。そうしないと、DOMが準備が整う前にプレーンJavaScriptが実行されるためです。 DOMが準備ができているときにこれを動作させるには、check this。
しかし、私はjQueryを取得することをお勧めします。あなたのサイトでJavaScript操作を拡張しようとすると、後で便利になるでしょう。
プラス、jQueryはパワーです。
その方法は、単純に（あなたはjQueryのは含まれてきたと仮定して）あなたの<head />にこのスクリプトを追加します。ここでは
$(document).ready(function() {
var innerHeight = $('#innerElement').height();
alert(innerHeight);
});
うん。これが最善の方法であるように見えます。ありがとう。ああ、はい、私はjQueryが大好きです。素敵な図書館。 –
ヒント：高さまたはoffsetHeightから0が返され続ける場合は、測定を行う前に要素を表示するように設定していることを確認してください。 –
これはこれを行うのに最適な方法です。ありがとう！ – Rook777
これ以上はありません。あなたが試みることができるのは、そのスタイルを削除し、高さを取得した後にjavascriptを使用して設定することです。最もエレガントなソリューションではありませんが、私はそれが唯一のものだと考えています。
私はその考えに肉体や骨を与えました。IMO関数にきれいに包み込まれると十分にエレガントです。 :) –
はファビアンアイデアを使用して、あなたが必要なものを達成するための一つの方法です。
function GetHeight() {
var oDiv = document.getElementById("MyDiv");
var sOriginalOverflow = oDiv.style.overflow;
var sOriginalHeight = oDiv.style.height;
oDiv.style.overflow = "";
oDiv.style.height = "";
var height = oDiv.offsetHeight;
oDiv.style.height = sOriginalHeight;
oDiv.style.overflow = sOriginalOverflow;
alert("Real height is " + height);
}
ライブデモおよびテスト・ケース：http://jsfiddle.net/yahavbr/7Lbz9/
うん、そうだろう。高さを計算する前にオーバーフローを取り除く必要はないと思っていましたが。 –
実際には、オーバーフローがセット/リセットされる速度がスクロールに入れられないので、これは私の問題を完全に解決します。 –
@Prakash私は変数を設定して元のオーバーフローと高さを戻すだけですCPUの1つの「ティック」内にあるため、ユーザーはUIの変更を見ることができません。 –
これは、テキストノードが内部にあるかどうかにかかわらず、すべての場合に機能します。これはjqueryを使用していますが、必要はありません。
//return the total height.
totalHeight = $('#elem')[0].scrollHeight;
//return the clipped height.
visibleHeight = $('#elem').height();
$（ '＃elem'）[0]はjquery呼び出しからdom要素を返しています。だからあなたはそれをプレーンオールのjavascriptを使ってどんなdom elemでも使うことができます。
より良いアプローチをお探しの方は、受け入れられた回答をスキップして@Colt答えをお試しください。 –
答えはjQueryを使用していますが、この質問はjQueryについて何も質問しませんでした。 – L0j1k
私はその点が 'scrollHeight'を使っていたと思います。* jQueryではありません。* – Giraldi