要素のレンダリングされた高さをどのように取得しますか？
<div>中にコンテンツがある要素があるとしましょう。内部のこのコンテンツは、の高さを伸ばし<div>ます。高さを明示的に設定していない場合に、「レンダリングされた」高さを取得するにはどうすればよいですか。明らかに、私は試しました：
var h = document.getElementById('someDiv').style.height;これを行うためのトリックはありますか？それが役立つ場合は、jQueryを使用しています。
回答:
それだけです
$('#someDiv').height();jQueryで。ラップされたセットの最初のアイテムの高さを数値として取得します。
使ってみる
.style.height最初にプロパティを設定した場合にのみ機能します。あまり役に立たない！
次のいずれかを試してください。
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;clientHeight 高さと垂直方向のパディングが含まれます。
offsetHeight 高さ、垂直パディング、および垂直ボーダーが含まれます。
scrollHeight 含まれているドキュメントの高さ（スクロールの場合は高さよりも大きくなります）、垂直パディング、垂直ボーダーが含まれます。
.clientWidth/.clientHeight はスクロール幅を含めないでください。スクロール幅を含める場合は、element.getBoundingClientRect().width 代わりに使用できます
これらの回答の上部に使用されているリンクの束があったので、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の互換性の問題を考慮に入れて、さらに調べます。言い換えれば、私は気にしないでください-またはしたいです。
しかし、私はする必要はありません。jQueryに感謝！
話の教訓：jQueryが何かのためのメソッドを持っている場合、それはおそらく互換性に関連するおそらく正当な理由によるものです。
最近、jQueryのメソッドリストを読んでいない場合は、ぜひご覧ください。
document.querySelector('.project_list_div').offsetHeight;elem.getBoundingClientRect().height
私は、JQueryを必要とせず、おそらく何人かの人々を助ける単純なコードを作成しました。ロード後に「ID1」の全高を取得し、「ID2」で使用します
function anyName(){
var varname=document.getElementById('ID1').offsetHeight;
document.getElementById('ID2').style.height=varname+'px';
}次に、本体をロードするように設定します
<body onload='anyName()'>要素のジオメトリを取得できます...
var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);この単純なJSはどうですか？
var geometry; geometry={};単にすることができますvar geometry={};
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>これが答えですか？
「何かを計算する必要があるが表示しない場合は、要素をに設定しvisibility:hidden、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要素に追加されると、それらはそのコンテナの幅に従ってレンダリングされます。最終的には30px短くなるので、これは奇妙になります。
高さの計算方法が異なる例を示すために、いくつかのスナップショットを追加しました。
高さの違いは明らかです。私は確かに絶対配置を追加して非表示にすることができますが、それは効果がないと確信しています。私はこれがうまくいかないと確信し続けました！
（さらに説明します）高さが実際のレンダリングされた高さよりも低くなります（レンダリング）。これは、DOM Temp要素の幅を既存の親と一致するように設定することで対処でき、理論的にはかなり正確に実行できます。また、それらを削除して既存の場所に戻すとどうなるかわかりません。彼らがinnerHTMLテクニックを介して到着したとき、私はこの異なるアプローチを使用して探します。
*しかし*それは必要ありませんでした。実際、それは宣伝どおりに機能し、正しい高さを返しました!!!
メニューを再び表示できるようになったとき、驚くべきことに、DOMはページ上部の流動レイアウトごとに正しい高さ（279px）を返しました。上記のコードは、280pxを返すgetClientRectsも使用しています。
これは次のスナップショットに示されています（Chromeから動作した後に取得）。
今、私はそのプロトタイプのトリックが機能する理由を考えていませんが、そうです。または、getClientRectsも機能します。
これらの特定の要素に関するこのすべての問題の原因は、appendChildの代わりにinnerHTMLを使用したためだと思いますが、これは現時点では純粋な推測です。
offsetHeight、通常。
何かを計算する必要があるが表示しない場合は、要素をvisibility:hiddenandに設定し、position:absoluteそれをDOMツリーに追加して、を取得してoffsetHeight削除します。（これは、前回チェックしたときにプロトタイプライブラリが舞台裏で行っていることです）。
作成した要素がまだDomでレンダリングされていないため、offsetHeightがゼロを返すことがあります。私はそのような状況のためにこの関数を書きました：
function getHeight(element)
{
var e = element.cloneNode(true);
e.style.visibility = "hidden";
document.body.appendChild(e);
var height = e.offsetHeight + 0;
document.body.removeChild(e);
e.style.visibility = "visible";
return height;
}すでにjQueryを使用している.outerHeight()場合は.height()、述べたように、最善の策はまたはです。
jQueryを使用しない場合は、使用中のボックスのサイズを確認して、さまざまなパディング+ボーダー+ clientHeightを合計するか、getComputedStyleを使用できます。。
var h = getComputedStyle（document.getElementById（ 'someDiv'））。height;
h これで、「53.825px」のような文字列になります。
そして、私はリファレンスを見つけることができませんが、私はgetComputedStyle()高価になる可能性があると聞いたので、それはおそらく各window.onscrollイベントで呼び出す必要があるものではありません（しかし、jQueryのものではありませんheight()）。
getComputedStyle、を使用parseInt(h, 10)して計算用の整数を取得します。
私があなたの質問を正しく理解していれば、おそらくこのようなものが役立つでしょう：
function testDistance(node1, node2) {
/* get top position of node 1 */
let n1Pos = node1.offsetTop;
/* get height of node 1 */
let n1Height = node1.clientHeight;
/* get top position of node 2 */
let n2Pos = node2.offsetTop;
/* get height of node 2 */
let n2Height = node2.clientHeight;
/* add height of both nodes */
let heightTogether = n1Height + n2Height;
/* calculate distance from top of node 1 to bottom of node 2 */
let actualDistance = (n2Pos + n2Height) - n1Pos;
/* if the distance between top of node 1 and bottom of node 2
is bigger than their heights combined, than there is something between them */
if (actualDistance > heightTogether) {
/* do something here if they are not together */
console.log('they are not together');
} else {
/* do something here if they are together */
console.log('together');
}
}特にCSSで高さを設定しましたか？使用していない場合は、使用するのoffsetHeight;ではなくheight
var h = document.getElementById('someDiv').style.offsetHeight;