web-dev-qa-db-ja.com

単純なJavaScriptでdivの高さを取得する

JQueryを使用せずにdivの高さを取得する方法について何かアイデアはありますか？

私はStack Overflowでこの質問を探していましたが、すべての答えがjQueryの.height()を指しているようです。

私はmyDiv.style.heightのようなものを試しましたが、私のdivがCSSでwidthとheightを設定していても、何も返されませんでした。

javascripthtmlcss
258
lwiii
var clientHeight = document.getElementById('myDiv').clientHeight;

または

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeightはパディングを含みます。

offsetHeightはパディング、scrollBar、ボーダーを含みます。

487
Dan

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);
16
Daniel Imms
var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

clientHeightとclientWidthは、あなたが探しているものです。

offsetHeightとoffsetWidthも高さと幅を返しますが、境界線とスクロールバーも含まれます。状況に応じて、どちらかを使用できます。

お役に立てれば。

9
Keo Strife

もう1つの選択肢は、getBoundingClientRect関数を使用することです。要素の表示が 'none'の場合、getBoundingClientRectは空の四角形を返します。

例：

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.height);  
}
9
user4617883

他の答えは私のために働いていませんでした。 divがheightやwidthセットを持っていると仮定して、これが w3schools で見つけたものです。

必要なのは、パディングを除外するためのheightとwidthだけです。

    var height = document.getElementById('myDiv').style.height;
    var width = document.getElementById('myDiv').style.width;

あなたは投票できませんでした： この回答は少なくとも5人の助けになりました。気に入らない場合は、その理由を教えてください。修正できます。それが私の最大の欠点です。なぜあなたがそれを却下したのか私に言うことはめったにありません。

3
craned
<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

Jsfiddle

1
user3556121

もう1つの選択肢があります。

var classElements = document.getElementsByClassName("className");

function setClassHeight (classElements, desiredHeightValue) 
    {
        var arrayElements = Object.entries(classElements);
        for(var i = 0; i< arrayElements.length; i++) {
            arrayElements[i][1].style.height = desiredHeightValue;
        }

    }
1
Pedro Coelho

el.clientHeightおよびel.offsetHeightに加えて、要素内のコンテンツの 高さ が必要な場合（要素自体に設定されている高さに関係なく）、el.scrollHeightを使用できます。 詳細情報

これは、要素の高さまたはmax-heightを内部の動的コンテンツの正確な高さに設定したい場合に便利です。例えば：

var el = document.getElementById('myDiv')

el.style.maxHeight = el.scrollHeight+'px'
0
cronoklee

やってみる

myDiv.offsetHeight 

console.log("Height:", myDiv.offsetHeight );
#myDiv { width: 100px; height: 666px; background: red}
<div id="myDiv"></div>
0
Kamil Kiełczewski