要素のサイズ

CSS の width や height を使うことによって要素の幅、高さを定義しない場合、通常はブラウザのサイズなどによって要素のサイズは変化します。今回は要素が動く場合のサイズの取得方法について見てみましょう。

デモは次のようになります。このページを見ているブラウザのサイズを変えると、おそらく下記の aaa....aaa が書かれたパラグラフ要素が変形します。[Show Size] ボタンをクリックすると、クリックした時点での要素のサイズを表示します。

aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa

<html>
<head>
<script type='text/javascript'>
var isCSS, isW3C, isIE4, isNN4, isIE6CSS;

function seekLayer(doc, name) {
var theObj;
for( var i=0;i<doc.layers.length; i++ ) {
    if(doc.layers[i].name == name) {
      theObj = doc.layers[i];
      break;
    }
    if ( doc.layers[i].document.layers.length > 0 ) {
      theObj = seekLayer(document.layers[i].document, name);
    }
}
return theObj;
}

function getRawObject(obj) {
var theObj;
if(typeof obj == "string" ) {
    if(isW3C) {
      theObj = document.getElementById(obj);
    }
    else if (isIE4) {
      theObj = document.all(obj);
    }
    else if (isNN4) {
      theObj = seekLayer(document, obj);
    }
}
else {
    theObj = obj;
}
return theObj;
}

function getObjectWidth(obj) {
var elem = getRawObject(obj);
var result = 0;
if(elem.offsetWidth) {
    result = elem.offsetWidth;
}
else if(elem.clip && elem.clip.width) {
    result = elem.clip.width;
}
else if(elem.style && elem.style.pixelWidth) {
    result = elem.style.pixelWidth;
}
return parseInt(result);
}

function getObjectHeight(obj) {
var elem = getRawObject(obj);
var result = 0;
if(elem.offsetHeight) {
    result = elem.offsetHeight;
}
else if(elem.clip && elem.clip.height) {
    result = elem.clip.height;
}
else if(elem.style && elem.style.pixelHeight) {
    result = elem.style.pixelHeight;
}
return parseInt(result);
}

function onClick(evt) {
var x = getObjectWidth('foo');
var y = getObjectHeight('foo');
alert('x=' + x + ' y=' + y );
}

function addEvent(element, eventType, fn, useCapture) {
if (element.addEventListener) {
    element.addEventListener(eventType, fn, useCapture);
    return true;
}
else if (element.attachEvent) {
    var r = element.attachEvent('on' + eventType, fn);
    return r;
}
else {
    element['on'+eventType] = fn;
}
}

function init(evt) {
if(document.images) {
    isCSS = (document.body && document.body.style) ? true : false;
    isW3C = (isCSS && document.getElementById) ? true : false;
    isIE4 = (isCSS && document.all) ? true : false;
    isNN4 = (document.layers) ? true : false;
    isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0 ) ? true : false;
}

var btn = document.getElementById('getsize');
addEvent ( btn, 'click', onClick, false );
}

addEvent (window, 'load', init, false );

</script>
</head>
<body>
<p>
<input type='button' id='getsize' value='Show Size'>
</p>
<p id='foo' style='border-width:1px;border-color:#000066;border-style:dotted;'>
aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa
aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa
aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa
aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa
aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa
aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa aaaaaaaaa aaaa aaaaaaa aaaaaaa aaaaaaaaaaa aaaaa a aaaa aaaaaaaaaaaaa aaaaa aaa aaaaaa
</p>

</body>
</html>