webdevqa.jp.net

HTML要素の実際の幅と高さを取得する方法

ブラウザのディスプレイ(ビューポート)の中央に配置したい<div>があるとします。そのためには、<div>要素の幅と高さを計算する必要があります。

何を使うべきですか?ブラウザの互換性に関する情報を含めてください。

761
snortasprocket

.offsetWidth.offsetHeightプロパティを使うべきです。それらは.styleではなく要素に属していることに注意してください。

var width = document.getElementById('foo').offsetWidth;

1113
Greg

Element.getBoundingClientRect() を見てください。

このメソッドは、widthheight、およびその他の有用な値を含むオブジェクトを返します。

{
    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.offsetHeight0を返すことがある場合に発生する問題はないと思います( comments here で説明)

もう1つの違いは、getBoundingClientRect()は小数ピクセルを返す場合があり、.offsetWidth.offsetHeightは最も近い整数に丸められることです。

IE8 NotegetBoundingClientRectIE8以下では高さと幅を返しません。*

IE8をサポートする必要がある場合、.offsetWidthおよび.offsetHeightを使用します。

var height = element.offsetHeight;
var width = element.offsetWidth;

このメソッドによって返されるオブジェクトは、実際にはnormalオブジェクトではないことに注意してください。そのプロパティは enumerable ではありません(たとえば、Object.keysはすぐに動作しません)。

詳細については、こちらをご覧ください。 ClientRect/DomRectをプレーンオブジェクトに変換する最良の方法

参照:

172
Zach Lysobey

_ 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();
59
tvanfosson

誰にとっても便利な場合に備えて、テキストボックス、ボタン、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
40
Graham

MDNによると:要素の寸法の決定

offsetWidthおよびoffsetHeightは、「表示コンテンツの幅、スクロールバー(ある場合)、パディング、およびボーダーを含む、要素が占めるスペースの総量」を返します。

clientWidthおよびclientHeightは、「実際の表示コンテンツが使用するスペースの量(パディングを含むが、ボーダー、マージン、またはスクロールバーは含まない)を返します」

scrollWidthscrollHeightは、「現在表示されているコンテンツの量に関係なく、コンテンツの実際のサイズ」を返します。

したがって、測定されたコンテンツが現在の表示領域外にあると予想されるかどうかによって異なります。

12
HarlemSquirrel

あなたは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>を中央揃えにし、コンテンツのサイズに合わせて縮小します。

4
Kornel

要素のスタイルを変更するのは簡単ですが、値を読むのはちょっとトリッキーです。

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>

詳細については/ https://javascript.info/styles-and-classes

2
Lekens

... 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>
1
sanecin

前の投稿で示唆されたように、element.offsetWidthとelement.offsetHeightはするべきです。

ただし、コンテンツを中央揃えにしたいだけの場合は、それを行うより良い方法があります。 xhtml strict DOCTYPEを使用すると仮定します。マージンを0、autoプロパティ、必要な幅(px)をbodyタグに設定します。コンテンツはページの中央揃えになります。

1
questzen

ブラウザのディスプレイポートの中央に配置する必要がある場合あなたはCSSだけでそれを達成することができます

yourSelector {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 
0
tdjprog

また、あなたはこのコードを使うことができます:

var divID = document.getElementById("divid");

var h = divID.style.pixelHeight;
0
mohammad