DOM属性を使ってbody要素から値を取得する時の注意
clientHeight属性、clientWidth属性を使って、body要素から値を取得する場合、body要素が読み込まれた後に値を取得する必要があります。例えば、次のサンプルを実行してみましょう。
Sample/sample_2.html
<!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_2</title>
<script type="text/javascript">
<!--
jsHeight = window.innerHeight
jsWidth = window.innerWidth
DOMHeight = document.body.clientHeight
DOMWidth = document.body.clientWidth
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
*body要素読み込み前
<p>
<script type="text/javascript">
<!--
document.write("コンテンツ表示領域の高さ(innerHeight)：");
document.write(jsHeight);
document.write("<br>");
document.write("コンテンツ表示領域の横幅(innerWidth)：");
document.write(jsWidth);
//-->
</script>
</p>
<p>
<script type="text/javascript">
<!--
document.write("body要素の高さ(clientHeight)：");
document.write(DOMHeight);
document.write("<br>");
document.write("body要素の横幅(clientWidth)：");
document.write(DOMWidth);
//-->
</script>
</p>
</body></html>
body要素が読み込まれる前にbody要素から値を取得しようとした場合。
サンプルでは、まずbody要素が読み込まれる前にあたるhead要素内に設定したJavaScriptの処理で、innerHeightプロパティの値を変数jsHeightに、innerWidthプロパティの値を変数jsWidthに、body要素のclientHeight属性の値を変数DOMHeightに、body要素のclientWidth属性の値を変数DOMWidthにそれぞれ代入しています。そしてその後、body要素内の処理で、変数に代入した各プロパティおよび属性の値を書き出そうとしています。
サンプルの実行結果を見てみると、innerHeightプロパティ、innerWidthプロパティの値は、正常に書き出されています。しかし、clientHeight属性、clientWidth属性の値は書き出されず、処理が途中で止まってしまっています。これは、body要素が読み込まれる前にbody要素の値を取得しようとしたために発生した現象です。
この現象は、body要素が読み込まれた後に、clientHeight属性、clientWidth属性の値の取得するようにすれば、回避できます。
