プレーンなJavaScriptでdivの高さを取得する

jQueryを使用せずにdivの高さを取得する方法に関するアイデアはありますか？

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

私のような何かをしようとしたmyDiv.style.height私のdivは、その持っていた場合でも、それは何も返さないwidthし、heightCSSで設定を。

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

または

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

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

offsetHeight パディング、スクロールバー、ボーダーが含まれます。

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);

別のオプションは、getBoundingClientRect関数を使用することです。要素の表示が「none」の場合、getBoundingClientRectは空のrectを返すことに注意してください。

例：

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

var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

clientHeightとclientWidthが探しているものです。

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

お役に立てれば。

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

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

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

あなたの反対投票：私が受け取った反対投票から判断すると、この回答は少なくとも5人を助けました。気に入らない場合は、その理由を教えてください。修正できます。これは私の反対投票で最大の不満です。なぜ反対票を投じたのかはめったにわかりません。

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

Jsfiddle

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

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

var el = document.getElementById('myDiv')

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

試す

myDiv.offsetHeight 

console.log("Height:", myDiv.offsetHeight );

#myDiv { width: 100px; height: 666px; background: red}

<div id="myDiv"></div>

ここにもう一つの選択肢があります：

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つのオプションは

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);