375

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

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

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

4

12 に答える 12

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

また

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

clientHeightパディングが含まれます。

offsetHeightパディング、スクロールバー、境界線が含まれます。

于 2013-03-25T13:05:33.123 に答える
36

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

例：

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

更新：2020年に書かれた同じコードは次のとおりです。

const elem = document.querySelector("#myDiv");
if(elem) {
  const rect = elem.getBoundingClientRect();
  console.log(`height: ${rect.height}`);
}
于 2017-08-05T00:45:42.433 に答える
25

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);
于 2013-03-25T12:59:27.057 に答える
12 
var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

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

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

お役に立てれば。

于 2013-03-25T12:59:52.250 に答える
4

他の答えは私のために働いていませんでした。におよび/またはセットがあると仮定して、 w3schoolsで見つけたものは次のとおりです。divheightwidth

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

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

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

于 2015-08-13T21:52:31.523 に答える
4

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

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

var el = document.getElementById('myDiv')

el.style.maxHeight = el.scrollHeight+'px'
于 2019-03-13T17:32:53.980 に答える
3

試す

myDiv.offsetHeight 


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

于 2019-04-17T04:57:21.553 に答える
2

もう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;
        }

    }
于 2019-06-14T17:48:10.680 に答える
2

1つのオプションは

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);
于 2019-12-19T17:39:20.470 に答える
1 
<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

Jsfiddle

于 2016-12-06T10:30:08.110 に答える
1

最善の方法は-

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

var myDivWidth = myDiv.clientWidth || myDiv.offsetWidth || (myDiv.getBoundingClientRect()).width;
var myDivHeight= myDiv.clientHeight || myDiv.offsetHeight  || (myDiv.getBoundingClientRect()).height;
          
console.log("Width: "+ myDivWidth + "px");
console.log("Height: "+ myDivHeight + "px");
<div style="padding: 50px; margin: 8px auto; outline: 1px solid green;">

  <div id="myDiv" style="width: 100%; height: 256px; padding: 50px; margin: 4px; background: #000000; color: #ffffff; outline: 1px solid red;">
  This is "#myDiv" <br>
  Width: 100% <br>
  Height: 256px
  </div>

</div>

于 2021-10-07T02:54:24.960 に答える
0

javascriptの高さの計算

パディングを含む

使用するclientHeight

element.clientHeight

使用するoffsetHeight

パディング、ボーダー、border_widthを含む

element.offsetHeight

使用するel.style.height

指定された高さのみを返します（手動の高さである必要があります。例：<div style="height:12px"></div>それ以外の場合は空の結果を返します

element.style.height

使用するgetBoundingClientRect

パディング、ボーダー、ボーダー幅を含む

elem.getBoundingClientRect();
elem.height
于 2021-04-05T18:17:36.390 に答える