javascript - divの高さを取得する

Question

Firebugは、計算されたスタイルを教えてくれますmy_div：

幅300px

高さ453.167px

しかし、実行すると、正しい要素をログに記録しconsole.log(mydiv.style.height)ていても、空の文字列が表示されます。console.log(mydiv)このロギングコードが呼び出されるまでに、ページが読み込まれていると確信しています。jQueryを使用しないソリューションをいただければ幸いです。

Answer 1

選択したブラウザに応じて、次のいずれかを実行します。

mydiv.offsetHeight
mydiv.clientHeight

クリップされたDIVの全高を取得します

divの高さを取得する

Answer 2

アップデート：

私の最初の回答以来、多くのブラウザの不整合が修正されています。これclientHeightで、DOM要素のプロパティが信頼できるようになりました。

var height = element.clientHeight;

Element.clientHeight読み取り専用プロパティは、CSSまたはインラインレイアウトボックスがない要素の場合はゼロです。それ以外の場合は、パディングを含むが水平スクロールバーの高さ、境界線、またはマージンを含まない、ピクセル単位の要素の内部の高さです。

clientHeightは、CSSの高さ+ CSSのパディング-水平スクロールバーの高さ（存在する場合）として計算できます。

注：このプロパティは、値を整数に丸めます。小数値が必要な場合は、element.getBoundingClientRect（）を使用してください。

ソース：https ：//developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

元の答え：

jQuery JSライブラリを使用する場合は、次のようにすることができます。

var computed_height = $('#my_div').height();

Prototype JSライブラリを使用する場合は、次のようになります。

var computed_height = $('my_div').getHeight();

ライブラリを使用することは、多くの場合、何かを行うための最も簡単でクロスブラウザの方法です。プロパティがブラウザ間で異なるため、vanillajsを使用して計算されたスタイルを取得することは信頼できません。