次のいずれかを試してください。
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;
clientHeight高さと垂直パディングが含まれます。
offsetHeight高さ、垂直パディング、および垂直境界線が含まれます。
scrollHeight含まれるドキュメントの高さ (スクロールの場合は高さよりも大きくなります)、垂直方向のパディング、および垂直方向の境界線が含まれます。
それはちょうどあるはずです
$('#someDiv').height();
jQueryで。これは、ラップされたセットの最初のアイテムの高さを数値として取得します。
使おうとしている
.style.height
最初にプロパティを設定した場合にのみ機能します。あまり役に立ちません！
これらの回答の上部に使用されているリンクがたくさんあったため、NON JQUERY ...elem.style.height
内側の高さ:
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight
document.getElementById(id_attribute_value).clientHeight;
外側の高さ:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight
document.getElementById(id_attribute_value).offsetHeight;
または、私のお気に入りのリファレンスの 1 つ: http://youmightnotneedjquery.com/
.outerHeight()この目的で使用できます。
要素の完全にレンダリングされた高さが得られます。また、どのcss-height要素も設定する必要はありません。念のため、コンテンツの高さに従ってレンダリングできるように、高さを自動のままにしておくことができます。
//if you need height of div excluding margin/padding/border
$('#someDiv').height();
//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();
// if you need height of div including padding and border
$('#someDiv').outerHeight();
//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);
これらの関数の明確なビューについては、jQuery のサイトまたは詳細な投稿を参照してください。
/ /の違いをクリアします.height()innerHeight()outerHeight()
必ず使う
$('#someDiv').height() // to read it
また
$('#someDiv').height(newHeight) // to set it
学んだばかりの重要なことがいくつかあるため、これを追加の回答として投稿しています。
私はoffsetHeightを使用するという罠に陥りそうになりました。これが起こったことです：
以下はその一部です。
Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
)
はい、スクロールとオフセットの両方を調べます。それが失敗した場合は、ブラウザーと css の互換性の問題を考慮して、さらに検討します。言い換えれば、STUFF I DONT CARE ABOUT - またはしたいです。
しかし、私はする必要はありません。ありがとうjQuery！
話の教訓: jQuery に何かのメソッドがある場合、おそらく互換性に関連する正当な理由があります。
最近、メソッドの jQuery リストを読んでいない場合は、一読することをお勧めします。
2020年にこれを行う最善の方法は、バニラjsとgetBoundingClientRect().height;
これが例です
let div = document.querySelector('div');
let divHeight = div.getBoundingClientRect().height;
console.log(`Div Height: ${divHeight}`);<div>
How high am I?
</div>この方法にheight加えて、 に関する他の多くのものにもアクセスできますdiv。
let div = document.querySelector('div');
let divInfo = div.getBoundingClientRect();
console.log(divInfo);<div>What else am I? </div>私は、JQuery を必要とせず、おそらく何人かの人々を助ける単純なコードを作成しました。ロード後に「ID1」の合計高さを取得し、「ID2」で使用します
function anyName(){
var varname=document.getElementById('ID1').offsetHeight;
document.getElementById('ID2').style.height=varname+'px';
}
次に、ボディを設定してロードします
<body onload='anyName()'>
これが答えですか？
「何かを計算する必要があるが表示しない場合は、要素をvisibility:hiddenandに設定しposition:absolute、それを DOM ツリーに追加し、offsetHeight を取得して、削除します。(これは、プロトタイプ ライブラリが前回チェックした行の背後で行っていることです)。」
私は多くの要素で同じ問題を抱えています。このサイトで使用できる jQuery や Prototype はありませんが、機能する場合はテクニックを借りることに賛成です。うまくいかなかったものの例とそれに続くものとして、次のコードがあります。
// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
{
var DoOffset = true;
if (!elementPassed) { return 0; }
if (!elementPassed.style) { return 0; }
var thisHeight = 0;
var heightBase = parseInt(elementPassed.style.height);
var heightOffset = parseInt(elementPassed.offsetHeight);
var heightScroll = parseInt(elementPassed.scrollHeight);
var heightClient = parseInt(elementPassed.clientHeight);
var heightNode = 0;
var heightRects = 0;
//
if (DoBase) {
if (heightBase > thisHeight) { thisHeight = heightBase; }
}
if (DoOffset) {
if (heightOffset > thisHeight) { thisHeight = heightOffset; }
}
if (DoScroll) {
if (heightScroll > thisHeight) { thisHeight = heightScroll; }
}
//
if (thisHeight == 0) { thisHeight = heightClient; }
//
if (thisHeight == 0) {
// Dom Add:
// all else failed so use the protype approach...
var elBodyTempContainer = document.getElementById('BodyTempContainer');
elBodyTempContainer.appendChild(elementPassed);
heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
elBodyTempContainer.removeChild(elementPassed);
if (heightNode > thisHeight) { thisHeight = heightNode; }
//
// Bounding Rect:
// Or this approach...
var clientRects = elementPassed.getClientRects();
heightRects = clientRects.height;
if (heightRects > thisHeight) { thisHeight = heightRects; }
}
//
// Default height not appropriate here
// if (thisHeight == 0) { thisHeight = elementHeightDefault; }
if (thisHeight > 3000) {
// ERROR
thisHeight = 3000;
}
return thisHeight;
}
これは基本的に、ゼロの結果を得るためだけにあらゆることを試みます。影響のない ClientHeight。問題の要素では、通常、ベースで NaN を取得し、オフセットとスクロールの高さでゼロを取得します。次に、Add DOM ソリューションと clientRects を試して、ここで機能するかどうかを確認しました。
2011 年 6 月 29 日、実際にコードを更新して、DOM と clientHeight の両方に追加してみましたが、予想よりも良い結果が得られました。
1) clientHeight も 0 でした。
2) ドムは実際に私に素晴らしい身長を与えてくれました。
3) ClientRects は、DOM 手法とほぼ同じ結果を返します。
追加された要素は本質的に流動的であるため、それ以外の場合は空の DOM Temp 要素に追加されると、そのコンテナーの幅に従ってレンダリングされます。これは、最終的には 30 ピクセル短いため、奇妙になります。
高さの計算方法が異なることを示すために、いくつかのスナップショットを追加しました。
身長差が一目瞭然。確かに絶対配置と非表示を追加できますが、効果はないと確信しています。私はこれがうまくいかないと確信し続けました！
(さらに余談)実際のレンダリングの高さよりも高さが低く出ます(レンダリング)。これは、DOM Temp 要素の幅を既存の親と一致するように設定することで対処でき、理論的にはかなり正確に行うことができます。また、それらを削除して既存の場所に戻すとどうなるかわかりません。彼らは innerHTML テクニックを使って到着したので、私はこの別のアプローチを使用して探します。
* ただし *そのどれも必要ありませんでした。実際、宣伝どおりに機能し、正しい高さを返しました!!!
メニューを再び表示できるようになったとき、驚くべきことに DOM はページの上部 (279 ピクセル) の流動的なレイアウトごとに正しい高さを返しました。上記のコードでは、280px を返す getClientRects も使用しています。
これは、次のスナップショットに示されています (動作中の Chrome から取得)。
なぜそのプロトタイプのトリックが機能するのかはわかりませんが、機能するようです。または、getClientRects も機能します。
これらの特定の要素で発生した問題の原因は、appendChild の代わりに innerHTML を使用したことだと思いますが、それは現時点ではまったくの憶測です。
offsetHeight、 いつもの。
何かを計算する必要があるが表示しない場合は、要素をvisibility:hiddenandに設定しposition:absolute、それを DOM ツリーに追加し、 を取得してoffsetHeight削除します。(これは、私が最後にチェックしたとき、プロトタイプ ライブラリが舞台裏で行っていることです)。
CSSで具体的に高さを設定しましたか？まだ使用していない場合offsetHeight;は、height
var h = document.getElementById('someDiv').style.offsetHeight;