ウィンドウや要素の大きさ

このページは？

ユーザーの環境に依存するウィンドウや要素大きさを取得する方法をいくつか紹介します。これらは動きのあるWebページを実現するためによく使用されています。ただし、これらの取得方法はブラウザによって異るのでブラウザごとに処理を分岐して記述するクロスブラウザの手法を用いなければなりません。

Window の表示領域

Window の表示領域を取得する方法はブラウザによって異なりますが、Internet Explorer や Netscape Navigator などでは以下のような方法が使われているようです。

Netscape Navigator などでは…

N4, N6以上（Mozilla）, Opera では以下のような方法でウィンドウの表示領域を取得できるようです。

Window 内の横幅

window.innerWidth

Window 内の高さ

window.innerHeight

Internet Explorer などでは…

IE4以上, Opera 7以上では以下のような方法でウィンドウの表示領域を取得できるようです。※ Opera 6、IE6の標準モード（厳格モード）では意図した値を取得できません。（スクロールして表示される領域も含んでしまいます。）

Window 内の横幅

document.body.clientWidth

Window 内の高さ

document.body.clientHeight

使用例

◆ソース内容

     *** JavaScript 部分 ***

function showWinWidth(){
    if(window.innerWidth){
        var ww=window.innerWidth;
        alert(ww);
    }
    else if(document.body && document.body.clientWidth){
        var ww=document.body.clientWidth;
        alert(ww);
    }
}
function showWinHeight(){
    if(window.innerHeight){
        var wh=window.innerHeight;
        alert(wh);
    }
    else if(document.body && document.body.clientHeight){
        var wh=document.body.clientHeight;
        alert(wh);
    }
}

    *** BODY 要素内 ***

<FORM action="./">
<INPUT type="button" value="Window 内の横幅" onclick="showWinWidth()">
<INPUT type="button" value="Window 内の高さ" onclick="showWinHeight()">
</FORM>

◆実行結果

要素の大きさを取得

要素の幅や高さを取得するために以下のような方法が使われているようです。この方法は IE4以上, N6以上（Mozilla）, Opera などで使用できるようです。（IE4は要素の取得方法が異なります。）

※ 下記の書式の中にあるobjはある要素オブジェクトが格納されているとします。

書式

要素の幅

obj.offsetWidth

要素の高さ

obj.offsetHeight

要素による値の違い

絶対配置（※1）されていないブロック要素の幅は width が指定されていなければマージンを除いたウィンドウの横幅一杯の値を返します。

width や height が指定されている要素や、絶対配置された要素で top と bottom あるいは left と right が同時に指定されている場合には要素の幅と高さはそれらを反映した値を返します。（※2）

それ以外の場合には要素の幅と高さはテキストなどの内容が占有する大きさを返します。

※1 絶対配置：CSS で positionプロパティが absolute または fixed に指定されている場合の事です。

※2 IE6.0 は「position: fixed」に未対応です。また、IE6.0 は top と bottom あるいは left と right を同時に指定した場合に bottom, right の指定を無視します。

実際の値は下記の使用例で確認してください。

使用例

◆ソース内容

<STYLE type="text/css">
<!--
#A,#B,#C,#D,#E {
    background: #fcf;
}
-->
</STYLE>
<SCRIPT type="text/JavaScript">
<!--
function showElementSize(id){
    if(document.getElementById){
        var obj=document.getElementById(id);
        if(obj.offsetWidth && obj.offsetHeight){
            var objWidth=obj.offsetWidth;
            var objHeight=obj.offsetHeight;
            alert("幅："+objWidth+"\n高さ："+objHeight);
        }
    }   
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P>
<INPUT type="button" value="A" onclick="showElementSize('A')">
<INPUT type="button" value="B" onclick="showElementSize('B')">
<INPUT type="button" value="C" onclick="showElementSize('C')">
<INPUT type="button" value="D" onclick="showElementSize('D')">
<INPUT type="button" value="E" onclick="showElementSize('E')">
（A～Eボタンを押してみてください。）</P>

<P id="A">A:ブロック要素（通常配置）</P>
<P><SPAN id="B">B:インライン要素（通常配置）</SPAN></P>
<P id="C" style="width:250px;height:70px">
C:ブロック要素（通常配置）width, height指定</P>
<P id="D" style="position:absolute;top:12em;left:2em">
D:ブロック要素（絶対配置）</P>
<P id="E" STYLE="position:absolute;top:15em;left:50px;right:150px;">
E:ブロック要素（絶対配置）left,right両方指定</P>

◆実行結果

実行結果

ウィンドウや要素の大きさ

このページは？

目次

Window の表示領域

Netscape Navigator などでは…

Window 内の横幅

Window 内の高さ

Internet Explorer などでは…

Window 内の横幅

Window 内の高さ

使用例

要素の大きさを取得

書式

要素の幅

要素の高さ

要素による値の違い

使用例