HTML要素の実際の幅と高さを取得する方法
ブラウザのディスプレイ（ビューポート）の中央に配置したい<div>があるとします。そのためには、<div>要素の幅と高さを計算する必要があります。
何を使うべきですか？ブラウザの互換性に関する情報を含めてください。
.offsetWidthと.offsetHeightプロパティを使うべきです。それらは.styleではなく要素に属していることに注意してください。
var width = document.getElementById('foo').offsetWidth;
Element.getBoundingClientRect() を見てください。
このメソッドは、width、height、およびその他の有用な値を含むオブジェクトを返します。
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320
}
例えば：
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
これには、.offsetWidthと.offsetHeightが0を返すことがある場合に発生する問題はないと思います（ comments here で説明）
もう1つの違いは、getBoundingClientRect()は小数ピクセルを返す場合があり、.offsetWidthと.offsetHeightは最も近い整数に丸められることです。
IE8 Note：getBoundingClientRectはIE8以下では高さと幅を返しません。*
IE8をサポートする必要がある場合、.offsetWidthおよび.offsetHeightを使用します。
var height = element.offsetHeight;
var width = element.offsetWidth;
このメソッドによって返されるオブジェクトは、実際にはnormalオブジェクトではないことに注意してください。そのプロパティは enumerable ではありません（たとえば、Object.keysはすぐに動作しません）。
詳細については、こちらをご覧ください。 ClientRect/DomRectをプレーンオブジェクトに変換する最良の方法
参照：
_ note _ ：この答えは2008年に書かれました。当時、ほとんどの人にとって最良のクロスブラウザソリューションは本当にjQueryを使うことでした。私は後世に答えをここに残しています、そして、あなたがjQueryを使っているなら、これはそれをするための良い方法です。他のフレームワークまたは純粋なJavaScriptを使用している場合は、一般に認められている答えが適しています。
JQuery 1.2.6以降では、コアの CSS関数 、heightおよびwidth（または必要に応じてouterHeightおよびouterWidth）のいずれかを使用できます。
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
誰にとっても便利な場合に備えて、テキストボックス、ボタン、divをすべて同じcssで配置します。
width:200px;
height:20px;
border:solid 1px #000;
padding:2px;
<input id="t" type="text" />
<input id="b" type="button" />
<div id="d"></div>
Chrome、firefox、ie-Edgeで試してみました。jqueryで試してみましたが、box-sizing:border-boxの有無で試してみました。常に<!DOCTYPE html>で
結果：
Firefox Chrome IE-Edge
with w/o with w/o with w/o box-sizing
$("#t").width() 194 200 194 200 194 200
$("#b").width() 194 194 194 194 194 194
$("#d").width() 194 200 194 200 194 200
$("#t").outerWidth() 200 206 200 206 200 206
$("#b").outerWidth() 200 200 200 200 200 200
$("#d").outerWidth() 200 206 200 206 200 206
$("#t").innerWidth() 198 204 198 204 198 204
$("#b").innerWidth() 198 198 198 198 198 198
$("#d").innerWidth() 198 204 198 204 198 204
$("#t").css('width') 200px 200px 200px 200px 200px 200px
$("#b").css('width') 200px 200px 200px 200px 200px 200px
$("#d").css('width') 200px 200px 200px 200px 200px 200px
$("#t").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#b").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#d").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#t").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#b").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#d").css('padding-left') 2px 2px 2px 2px 2px 2px
document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200
document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("t").offsetWidth 200 206 200 206 200 206
document.getElementById("b").offsetWidth 200 200 200 200 200 200
document.getElementById("d").offsetWidth 200 206 200 206 200 206
offsetWidthおよびoffsetHeightは、「表示コンテンツの幅、スクロールバー（ある場合）、パディング、およびボーダーを含む、要素が占めるスペースの総量」を返します。
clientWidthおよびclientHeightは、「実際の表示コンテンツが使用するスペースの量（パディングを含むが、ボーダー、マージン、またはスクロールバーは含まない）を返します」
scrollWidthとscrollHeightは、「現在表示されているコンテンツの量に関係なく、コンテンツの実際のサイズ」を返します。
したがって、測定されたコンテンツが現在の表示領域外にあると予想されるかどうかによって異なります。
あなたはIE7とそれ以前のためにそれを計算する必要があります（そしてあなたの内容が固定サイズを持っていない場合のみ）。 CSS 2をサポートしていない古いIEにハッキングを制限するために、HTML条件付きコメントを使用することをお勧めします。他のすべてのブラウザではこれを使用します。
<style type="text/css">
html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
body {display:table-cell; vertical-align:middle;}
div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>
これは完璧な解決策です。任意のサイズの<div>を中央揃えにし、コンテンツのサイズに合わせて縮小します。
要素のスタイルを変更するのは簡単ですが、値を読むのはちょっとトリッキーです。
JavaScriptでは、組み込みメソッドの呼び出しgetComputedStyleを使用しない限り、css（internal/external）からの要素スタイルプロパティ（elem.style）を読み取ることはできません。
getComputedStyle（element [、pseudo]）
要素： 値を読み込む要素。
pseudo： 必要ならば擬似要素、例えば:: before。空の文字列または引数なしは要素自体を意味します。
結果は、elem.styleのようなスタイルプロパティを持つオブジェクトですが、現在はすべてのCSSクラスを対象としています。
たとえば、ここのスタイルでは余白は見られません。
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
JavaScriptコードを修正して、幅/高さまたはその他の属性を取得したい要素のgetComputedStyleを含めます。
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
計算値と解決値
CSSには2つの概念があります。
計算されたスタイル値は、CSSカスケードの結果として、すべてのCSSルールとCSS継承が適用された後の値です。高さ：1emまたはフォントサイズ：125％のように見えます。
解決されたスタイル値は、要素に最後に適用されたものです。 1emや125％などの値は相対値です。ブラウザは計算された値を取り、すべての単位を固定および絶対にします。たとえば、height：20pxやfont-size：16pxです。ジオメトリプロパティの場合、解決された値はwidth：50.5pxのように浮動小数点を持つことがあります。
昔はgetComputedStyleが計算値を取得するために作成されましたが、解決された値がはるかに便利で、標準が変更されたことがわかりました。
今日、getComputedStyleは実際にはプロパティの解決された値を返します。
注意してください：
getComputedStyleには完全なプロパティ名が必要です
あなたは常にpaddingLeftやheightやwidthのようなあなたが望む正確なプロパティを尋ねるべきです。それ以外の場合、正しい結果は保証されません。
例えば、paddingLeft/paddingTopというプロパティがある場合、getComputedStyle（elem）.paddingに対して何を取得すればよいですか？何もない、あるいはおそらく既知のパディングから「生成された」値でしょうか。標準的な規則はありません。
他に矛盾があります。例として、いくつかのブラウザ（Chrome）は下記の文書で10pxを示しています、そしてそれらのいくつか（Firefox）は - ありません：
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
... CSSはdivを中心に置くのに役立つようです...
<style>
.monitor {
position:fixed;/* ... absolute possible if on :root */
top:0;bottom:0;right:0;left:0;
visibility:hidden;
}
.wrapper {
width:200px;/* this is size range */
height:100px;
position:absolute;
left:50%;top:50%;
visibility:hidden;
}
.content {
position:absolute;
width: 100%;height:100%;
left:-50%;top:-50%;
visibility:visible;
}
</style>
<div class="monitor">
<div class="wrapper">
<div class="content">
... so you hav div 200px*100px on center ...
</div>
</div>
</div>
前の投稿で示唆されたように、element.offsetWidthとelement.offsetHeightはするべきです。
ただし、コンテンツを中央揃えにしたいだけの場合は、それを行うより良い方法があります。 xhtml strict DOCTYPEを使用すると仮定します。マージンを0、autoプロパティ、必要な幅（px）をbodyタグに設定します。コンテンツはページの中央揃えになります。
ブラウザのディスプレイポートの中央に配置する必要がある場合あなたはCSSだけでそれを達成することができます
yourSelector {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
また、あなたはこのコードを使うことができます：
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;