Web ページの表示領域の幅: document.body.clientWidth
Web ページの表示領域の高さ: document.body.clientHeight
Web ページの表示領域の幅: document.body.offsetWidth (端の幅を含む)
Web ページの表示領域の高さ: document.body.offsetHeight (端の幅を含む)
Web ページ本文の全テキスト幅: document.body.scrollWidth
Web ページ本文の完全なテキストの高さ: document.body.scrollHeight
スクロールされる Web ページの高さ: document.body.scrollTop
スクロールされる Web ページの左側: document.body.scrollLeft
Web ページの本文: window.screenTop
Web ページの本文の左側の部分: window.screenLeft
高画面解像度: window.screen.height
画面解像度の幅: window.screen.width
画面の利用可能な作業領域の高さ: window.screen.availHeight
画面で利用可能な作業領域の幅: window.screen.availWidth
HTML の正確な位置決め:scrollLeft、scrollWidth、clientWidth、offsetWidth
scrollHeight: オブジェクトのスクロールの高さを取得します。
scrollLeft: オブジェクトの左端とウィンドウ内に現在表示されているコンテンツの左端の間の距離を設定または取得します。
scrollTop: オブジェクトの上部とウィンドウ内の表示コンテンツの上部の間の距離を設定または取得します。
scrollWidth: オブジェクトのスクロール幅を取得します。
offsetHeight: レイアウト、または親座標の offsetParent プロパティで指定された親座標を基準としたオブジェクトの高さを取得します。
offsetLeft: offsetParent プロパティで指定されたレイアウトまたは親座標を基準としたオブジェクトの計算された左位置を取得します。
offsetTop: offsetTop プロパティで指定されたレイアウトまたは親の座標を基準にして計算されたオブジェクトの上部の位置を取得します
event.clientX ドキュメントを基準とした水平座標
event.clientY ドキュメントを基準とした垂直座標
event.offsetX コンテナを基準とした水平座標
event.offsetY コンテナを基準とした垂直座標
document.documentElement.scrollTop 垂直スクロールの値
event.clientX+document.documentElement.scrollTop ドキュメントを基準とした水平座標 + 垂直スクロール量
IEとFireFoxの違いは以下の通りです。
IE6.0、FF1.06以降：
clientWidth = 幅 + パディング
clientHeight = 高さ + パディング
offsetWidth = 幅 + パディング + 境界線
offsetHeight = 高さ + パディング + 境界線
IE5.0/5.5：
clientWidth = 幅 - 境界線
clientHeight = 高さ - 境界線
offsetWidth = 幅
オフセット高さ = 高さ
(言及する必要があります: CSS の margin 属性は clientWidth、offsetWidth、clientHeight、および offsetHeight とは何の関係もありません)
Web ページの表示領域の幅: document.body.clientWidth
Web ページの表示領域の高さ: document.body.clientHeight
Web ページの表示領域の幅: document.body.offsetWidth (端の幅を含む)
Web ページの表示領域の高さ: document.body.offsetHeight (端の高さを含む)
Web ページ本文の全テキスト幅: document.body.scrollWidth
Web ページ本文の完全なテキストの高さ: document.body.scrollHeight
Web ページがスクロールされる高さ: document.body.scrollTop
スクロールされる Web ページの左側: document.body.scrollLeft
Web ページの本文: window.screenTop
Web ページの本文の左側の部分: window.screenLeft
画面解像度の高さ: window.screen.height
画面解像度の幅: window.screen.width
画面の利用可能な作業領域の高さ: window.screen.availHeight
画面で利用可能な作業領域の幅: window.screen.availWidth
－－－－－－－－－－－－－－－－－－
技術的なポイント
このセクションのコードでは、主にウィンドウに関する Document オブジェクトのいくつかのプロパティを使用します。これらのプロパティの主な機能と使用方法は次のとおりです。
ウィンドウのサイズを取得するには、ブラウザごとに異なるプロパティとメソッドを使用する必要があります。ウィンドウの実際のサイズを検出するには、IE の Netscape で Window のプロパティを使用する必要があります。ボディを検出するためのドキュメント; DOM 環境でウィンドウのサイズを取得したい場合は、要素ではなくルート要素のサイズに注意する必要があります。
Window オブジェクトの innerWidth プロパティには、現在のウィンドウの内側の幅が含まれます。 Window オブジェクトの innerHeight プロパティには、現在のウィンドウの内側の高さが含まれます。
Document オブジェクトの body 属性は、HTML ドキュメントのタグに対応します。 Document オブジェクトの documentElement プロパティは、HTML ドキュメントのルート ノードを表します。
document.body.clientHeight は、HTML ドキュメントが配置されているウィンドウの現在の高さを表します。 document.body.clientWidth は、HTML ドキュメントが配置されているウィンドウの現在の幅を表します。
コードを実装する
次のようにコードをコピーします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<title>ブラウザ ウィンドウのサイズを変更してください</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<本文>
<h2 align="center">ブラウザ ウィンドウのサイズを変更してください</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--ブラウザ ウィンドウの実際のサイズを表示します-->
ブラウザ ウィンドウの実際の高さ: <input type="text" name="availHeight" size="4"><br>
ブラウザ ウィンドウの実際の幅: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //関数: 寸法を取得する
{
//ウィンドウの幅を取得する
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//ウィンドウの高さを取得する
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//Document の奥深くまで移動してボディを検出し、ウィンドウ サイズを取得します
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
// 結果を 2 つのテキスト ボックスに出力します
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//関数を呼び出して値を取得する
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
ソースプログラムの解釈
(1) プログラムはまず、ウィンドウの現在の幅と高さを表示する 2 つのテキスト ボックスを含むフォームを作成します。これらの値は、ウィンドウ サイズの変更に応じて変化します。
(2) 後続の JavaScript コードでは、ウィンドウの高さと幅の値を保存するために、最初に 2 つの変数 winWidth と winHeight が定義されます。
(3) 次に、関数 findDimensions () で、window.innerHeight と window.innerWidth を使用してウィンドウの高さと幅を取得し、それらを前述の 2 つの変数に保存します。
(4) 次に、Document の奥深くまで進んで本文を検出し、ウィンドウ サイズを取得して、上記の 2 つの変数に格納します。
(5) 関数の最後に、フォーム要素に名前でアクセスすると、結果が 2 つのテキスト ボックスに出力されます。
(6) JavaScript コードの最後で、findDimensions () 関数を呼び出して操作全体を完了します。