Web/DB プログラミング徹底解説

ホーム > JavaScript プログラミング > 要素のサイズ

要素のサイズ

スポンサーリンク

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>

スポンサーリンク