web-dev-qa-db-ja.com

どのようにして要素のレンダリングされた高さを得ますか？

どのようにして要素のレンダリングされた高さを得ますか？

いくつかのコンテンツを含む<div>要素があるとしましょう。この内容は<div>の高さを引き延ばします。明示的に高さを設定していない場合、どのようにして「レンダリングされた」高さになるのですか。明らかに、私は試してみました：

var h = document.getElementById('someDiv').style.height;

これを行うためのトリックはありますか？それが助けになれば私はjQueryを使っています。

javascriptjquerycssheight
340
BuddyJoe

それだけでなければなりません

$('#someDiv').height();

jQueryを使って。これは、折り返しセットの最初の項目の高さを数値として取得します。

使おうとしている

.style.height

最初にプロパティを設定した場合にのみ機能します。あまり役に立ちません。

161
Russ Cam

次のいずれかを試してください。

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeightは高さと垂直方向のパディングを含みます。

offsetHeightには、高さ、垂直方向の余白、および垂直方向の境界が含まれます。

scrollHeightには、含まれる文書の高さ（スクロールの場合は単なる高さよりも大きくなります）、垂直方向の余白、および垂直方向の罫線が含まれます。

1070
strager

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;

または私のお気に入りの参考文献の一つ： http://youmightnotneedjquery.com/ /

138
Jason Lydon

この目的のために.outerHeight()を使うことができます。

それはあなたに要素の完全にレンダリングされた高さを与えるでしょう。また、要素のcss-heightを設定する必要もありません。念のため、あなたはその高さを保つことができます auto それでそれは内容の高さに従ってレンダリングされることができます。

//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()の間のdifferenceをクリアします

45
open and free
style = window.getComputedStyle(your_element);

それから単に：style.height

27
Feiteira

私はこれを使う：

document.getElementById('someDiv').getBoundingClientRect().height

仮想DOM を使用した場合にも機能します。私はこれをVueで使っています：

this.$refs['some-ref'].getBoundingClientRect().height
18
Daantje

間違いなく使う

$('#someDiv').height()   // to read it

または

$('#someDiv').height(newHeight)  // to set it

私が学んだばかりの重要なことがいくつかあるため、私はこれを追加の回答として投稿しています。

私は今offsetHeightを使っているところでトラップに陥っていました。これが起こったことです。

  • 私は自分の要素が持っているプロパティを '監視'するためにデバッガを使うという古き良きなトリックを使いました
  • 私は、どれが私が期待していた価値のまわりに価値があるのか​​を見ました
  • それはoffsetHeightでした - それで私はそれを使いました。
  • それから私はそれが隠されたDIVでうまくいかなかったことに気づいた
  • MaxHeightを計算した後に隠してみましたが、それは不器用に見えました - 混乱しました。
  • 私は検索をしました - jQuery.height（）を発見してそれを使いました
  • 隠された要素に対してもheight（）が機能することを発見
  • 楽しみのために、高さ/幅のjQuery実装をチェックしました。

そのほんの一部です。

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のメソッドリストをまだ読んでいない場合 最近見てみることをお勧めします。

15
Simon_Weaver

私はJQueryさえ必要としない簡単なコードを作りました、そしておそらく何人かの人々を助けるつもりです。ロードされた後の「ID1」の高さの合計を取得し、「ID2」で使用します。

function anyName(){
    var varname=document.getElementById('ID1').offsetHeight;
    document.getElementById('ID2').style.height=varname+'px';
}

それからそれをロードするためにボディをセットしてください

<body onload='anyName()'>
12
Robuske

うーん、Elementジオメトリを取得できます。

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はどうですか？

8
Thomas Ludewig

それでこれは答えですか？

「表示しないで計算する必要がある場合は、要素を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）Domが実際に私に高さを教えてくれました。

3）ClientRectsはDOM手法とほぼ同じ結果を返します。

追加された要素は本質的に流動的なので、それ以外の場合は空のDOM Temp要素に追加されると、それらはそのコンテナの幅に従ってレンダリングされます。それは結局それが最終的に終わるより30px短いのでこれは奇妙になります。

高さの計算方法を説明するために、スナップショットをいくつか追加しました。 Menu block rendered normallyMenu block added to DOM Temp element

高さの違いは明らかです。私は確かに絶対的なポジショニングと隠しを加えることができました、しかし私はそれが効果をもたらさないであろうと確信しています。私はこれがうまくいかないと確信し続けました！

（さらに掘り下げます）高さは、実際にレンダリングされた高さよりも低くなります（レンダリングされます）。これは、DOM Temp要素の幅を既存の親と一致するように設定することで解決でき、理論上はかなり正確に行うことができます。また、それらを削除して既存の場所に追加した結果もわかりません。彼らがinnerHTML技術を介して到着したので、私はこの異なるアプローチを使って見ているでしょう。

* HOWEVER * それのどれも必要ではなかった。実際にそれは宣伝どおりに動作し、正しい高さを返しました!!!

メニューを再び目に見えるようにすることができたとき、驚くべきことにDOMはページ上部の流動的なレイアウトごとに正しい高さを返していました（279px）。上記のコードは、280pxを返すgetClientRectsも使用します。

これは、次のスナップショットに示されています（動作しているときにChromeから取得）
enter image description here

今、私はそのプロトタイプのトリックがなぜうまくいくのかわからないが、それはそう思われる。あるいは、getClientRectsも機能します。

私はこれらの特定の要素に関するすべてのこの問題の原因がappendChildの代わりにinnerHTMLの使用であったと思うが、それは現時点では純粋な推測である。

8
DHorse

通常はoffsetHeightです。

表示しないで計算する必要がある場合は、要素をvisibility:hiddenおよびposition:absoluteに設定し、DOMツリーに追加し、offsetHeightを取得して削除します。 （これが、前回確認したときにプロトタイプライブラリが実行した動作です）。

6
user58777

時々、offsetHeightはあなたが作成した要素がまだDomでレンダリングされていないためにゼロを返すでしょう。私はこのような状況のためにこの関数を書きました：

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;
}
5
Lonnie Best

すでにjQueryを使用している場合は、既に述べたように.outerHeight()または.height()が最善の策です。

JQueryがなくても、使用中のボックスサイズをチェックして、さまざまなパディング+ボーダー+ clientHeight、 または を追加できます。 getComputedStyle ：を使用できます。

var h = getComputedStyle（document.getElementById（ 'someDiv'））。height;

hは "53.825px"のような文字列になります。

私はその参照を見つけることができません、しかし私はgetComputedStyle()が高価になることを聞いたと思います、それでそれはおそらくあなたがそれぞれのwindow.onscrollイベントで呼び出したいものではないでしょう（しかし、それから、jQueryのheight()も）。

4
chbrown

MooToolsを使うと：

$（ 'someDiv'）。getSize（）。y

2
kwcto

私があなたの質問を正しく理解していれば、おそらくこのようなものが役に立つでしょう：

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');
    } 
}
1
LuisBento
document.querySelector('.project_list_div').offsetWidth;
1
Ritwik