試しに、次のサンプルを実行してみましょう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Sample_3</title>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
*body要素読み込み後_1
<p>
<script type="text/javascript">
<!--
jsHeight = window.innerHeight
jsWidth = window.innerWidth
document.write("コンテンツ表示領域の高さ(innerHeight)：");
document.write(jsHeight);
document.write("<br>");
document.write("コンテンツ表示領域の横幅(innerWidth)：");
document.write(jsWidth);
//-->
</script>
</p>
<p>
<script type="text/javascript">
<!--
DOMHeight = document.body.clientHeight
DOMWidth = document.body.clientWidth
document.write("body要素の高さ(clientHeight)：");
document.write(DOMHeight);
document.write("<br>");
document.write("body要素の横幅(clientWidth)：");
document.write(DOMWidth);
//-->
</script>
</p>
</body></html>
このサンプルでは、body要素が読み込まれた後に、innerHeightプロパティ、innerWidthプロパティ、clientHeight属性、clientWidth属性それぞれの値を変数に代入するようにしています。このように、body要素が読み込まれた後にclientHeight属性、clientWidth属性の値を取得するようにすると、処理が途中で止まることなく、正常に値を取得することができます。
また、次のサンプルのようにbody要素内にイベントハンドラonLoadを設定し、そのタイミングでbody要素のclientHeight属性、clientWidth属性の値を取得するようにしても、各属性の値を取得することができます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Sample_4</title>
<script type="text/javascript">
<!--
function Sample() {
alert ( "コンテンツ表示領域の高さ(innerHeight)：" + window.innerHeight + "\n" +
"コンテンツ表示領域の横幅(innerWidth)：" + window.innerWidth + "\n" +
"body要素の高さ(clientHeight)：" + document.body.clientHeight + "\n" +
"body要素の横幅(clientWidth)：" + document.body.clientWidth );
}
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body onLoad="Sample()">
*body要素読み込み後_2
</body></html>
このサンプルを実行すると、HTMLファイルが読み込まれた時、ブラウザのコンテンツ表示領域の高さと幅の値を、JavaScriptのプロパティやDOMの属性から取得し、アラートダイアログにその値を表示します。
それでは、以上のことを踏まえて、少し実践的なサンプルを見ていきましょう。このサンプルでは、JavaScriptを使ってstyle属性に表示位置の値を設定することによって、コンテンツ表示領域の中央にdiv要素を表示しています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Sample_5</title>
<script type="text/javascript">
<!--
function Change(){
var WI=document.body.clientWidth;
var HI=document.body.clientHeight;
var NAKA_UE=(HI/2)-50;
var NAKA_YOKO=(WI/2)-50;
document.getElementById("STY1").style.top=(NAKA_UE+"px");
document.getElementById("STY1").style.left=(NAKA_YOKO+"px");
}
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body onLoad="Change()">
*コンテンツ表示領域中央にdiv要素を表示
<div id="STY1" style="position:absolute; width:100px; height:100px">
<img src="image.jpg" alt="image.jpg" width="100" height="100">
</div>
</body></html>
このサンプルではまず、HTMLファイルが読み込まれた時、イベントハンドラonLoadにより、関数Change()の処理を開始しています。関数Change()の処理ではclientHeight属性、clientWidth属性を使って、コンテンツ表示領域の高さと横幅の値を取得した後、その値を2分の1にし、さらにそこから表示するstyle属性を設定したdiv要素の高さと横幅を2分の1した「50」の数値を引いた値を、それぞれ変数NAKA_UE、NAKA_YOKOに代入しています。そしてその値を、style属性のleft、topに設定することにより、HTMLファイルが読み込まれた時、div要素をブラウザのコンテンツ表示領域中央に表示しています。
このようにJavaScriptを利用すると、それぞれ違うユーザーの状況に合わせ、コンテンツのレイアウトを変更することも可能なのです。
