オフセット上
offsetParent プロパティで指定されたレイアウトまたは親の座標を基準にして計算されたオブジェクトの上部の位置を取得します。
左オフセット
offsetParent プロパティで指定されたレイアウトまたは親の座標を基準にして計算されたオブジェクトの左位置を取得します。
オフセット高さ
offsetParent プロパティで指定されたレイアウトまたは親座標を基準としたオブジェクトの高さを取得します。
IE と Opera は、offsetHeight = clientHeight + スクロール バー + 境界線を信じます。
NS と FF は、offsetHeight を Web ページ コンテンツの実際の高さとみなします。これは clientHeight よりも小さくなる可能性があります。
オフセット幅
offsetParent プロパティで指定されたレイアウトまたは親座標を基準としたオブジェクトの幅を取得します。
オフセット親
オブジェクトの offsetTop プロパティと offsetLeft プロパティを定義するコンテナ オブジェクトへの参照を取得します。
クライアントの高さ
オブジェクトに適用される可能性のあるマージン、境界線、スクロールバー、パディングをカウントせずに、オブジェクトの高さを取得します。
clientHeight については誰もが異論はありません。これはコンテンツの表示領域の高さ、つまりページ ブラウザーでコンテンツが表示される領域の高さであると考えられています。最後のツールバーとステータスバーの上。これはページのコンテンツとは関係ありません。
クライアント左
offsetLeft プロパティとクライアント領域の実際の左側の間の距離を取得します。
クライアントトップ
offsetTop プロパティとクライアント領域の実際の上部の間の距離を取得します。
clientWidth
オブジェクトに適用される可能性のあるマージン、境界線、スクロールバー、パディングをカウントせずに、オブジェクトの幅を取得します。
スクロール属性
スクロール
スクロールをオフにするかどうかを設定または取得します。
スクロール高さ
オブジェクトのスクロール高さを取得します。
左にスクロール
オブジェクトの左端とウィンドウ内に現在表示されているコンテンツの左端の間の距離を設定または取得します。
スクロールトップ
オブジェクトの上部とウィンドウ内の表示コンテンツの上部の間の距離を設定または取得します。
スクロール幅
オブジェクトのスクロール幅を取得します。イベント属性
×
親ドキュメントを基準としたマウス ポインターの位置の x ピクセル座標を設定または取得します。
スクリーンX
ユーザーの画面を基準としたマウス ポインターの位置の x 座標を設定または取得します。
オフセットX
イベントをトリガーしたオブジェクトを基準としたマウス ポインターの位置の x 座標を設定または取得します。
クライアントX
ウィンドウのクライアント領域を基準としたマウス ポインターの位置の x 座標を設定または取得します。クライアント領域には、ウィンドウ独自のコントロールとスクロール バーは含まれません。
ここでは、document.body の clientHeight、offsetHeight、scrollHeight の 4 つのブラウザの解釈について説明します。ここでは、HTML コントロールの場合は異なります。
これら 4 つのブラウザとは、IE (Internet Explorer)、NS (Netscape)、Opera、および FF (FireFox) です。
クライアントの高さ
clientHeight については誰もが異論はありません。これはコンテンツの表示領域の高さ、つまりページ ブラウザーでコンテンツが表示される領域の高さであると考えられています。最後のツールバーとステータスバーの上。これはページのコンテンツとは関係ありません。
オフセット高さ
IE と Opera は、offsetHeight = clientHeight + スクロール バー + 境界線を信じます。 NS と FF は、offsetHeight を Web ページ コンテンツの実際の高さとみなします。これは clientHeight よりも小さくなる可能性があります。
スクロール高さ
IE と Opera は、scrollHeight を Web ページ コンテンツの実際の高さとみなします。これは clientHeight よりも小さくなる可能性があります。 NS と FF は、scrollHeight を Web ページ コンテンツの高さとみなしますが、最小値は clientHeight です。 簡単に言えば
clientHeight は、ブラウザを通じてコンテンツが表示される領域の高さです。
NS と FF は、offsetHeight とscrollHeight が両方とも Web コンテンツの高さであると信じていますが、Web コンテンツの高さが clientHeight 以下の場合、scrollHeight の値は clientHeight であり、offsetHeight は clientHeight より小さくなる可能性があります。
IE と Opera は、offsetHeight を表示領域 clientHeight スクロール バーと境界線とみなします。 scrollHeight は、Web ページ コンテンツの実際の高さです。
同じ理由
clientWidth、offsetWidth、scrollWidth の説明は上記と同じですが、高さを幅に置き換えるだけです。
しかし
FF は clientHeight を DOCTYPE ごとに異なる方法で解釈しますが、xhtml 1 trasitional は上記のように解釈しません。他のブラウザではこの問題は発生しません。
jsはページの高さを取得します
次のようにコードをコピーします。
<スクリプト>
関数 getInfo()
{
vars = "";
s += "Web ページの表示領域の幅:"+ document.body.clientWidth;
s += "Web ページの表示領域の高さ:"+ document.body.clientHeight;
s += "Web ページの表示領域の幅: "+ document.body.offsetWidth + " (端とスクロール バーの幅を含む)";
s += "Web ページの表示領域の高さ: "+ document.body.offsetHeight + " (側線の幅を含む)";
s += "Web ページのテキストの全幅:"+ document.body.scrollWidth;
s += "Web ページ本文の全文の高さ:"+ document.body.scrollHeight;
s += "Web ページがスクロールされる高さ (ff):"+ document.body.scrollTop;
s += "Web ページがスクロールされる高さ (すなわち):"+ document.documentElement.scrollTop;
s += "Web ページの左側がスクロールされます:"+ document.body.scrollLeft;
s += "Web ページの本文: "+ window.screenTop;
s += "Web ページのテキスト部分左:"+ window.screenLeft;
s += "画面解像度の高さ:"+ window.screen.height;
s += "画面解像度の幅:"+ window.screen.width;
s += "画面の利用可能な作業領域の高さ:"+ window.screen.availHeight;
s += "画面で使用可能な作業領域の幅:"+ window.screen.availWidth;
s += "あなたの画面設定は "+ window.screen.colorDepth +" ビットカラーです";
s += "画面設定" + window.screen.deviceXDPI +" ピクセル/インチ";
// アラート;
}
getInfo();
</script>
私のローカルテストでは:
IE、FireFox、Operaで使用可能
document.body.clientWidth
document.body.clientHeight
利用可能で、簡単で、便利です。
そして、企業プロジェクトの中には、次のようなものがあります。
Opera は今でも使用しています
document.body.clientWidth
document.body.clientHeight
ただし、IE と FireFox は使用します
document.documentElement.clientWidth
document.documentElement.clientHeight
W3C 標準が問題を引き起こしていることが判明しました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
この行のタグをページに追加すると、
IEの場合:
document.body.clientWidth ==> BODYオブジェクトの幅
document.body.clientHeight ==> BODY オブジェクトの高さ
document.documentElement.clientWidth ==> 表示領域の幅
document.documentElement.clientHeight ==> 表示領域の高さ
Firefox の場合:
document.body.clientWidth ==> BODYオブジェクトの幅
document.body.clientHeight ==> BODY オブジェクトの高さ
document.documentElement.clientWidth ==> 表示領域の幅
document.documentElement.clientHeight ==> 表示領域の高さ
オペラの場合:
document.body.clientWidth ==> 表示領域の幅
document.body.clientHeight ==> 可視領域の高さ
document.documentElement.clientWidth ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅を足したもの)
document.documentElement.clientHeight ==> ページ オブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)
W3C 標準が定義されていない場合は、
IEは次のとおりです。
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
ファイアフォックスは次のとおりです。
document.documentElement.clientWidth ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅を加えたもの) document.documentElement.clientHeight ==> ページ オブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)
オペラとは:
document.documentElement.clientWidth ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅を加えたもの) document.documentElement.clientHeight ==> ページ オブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)
実際、開発の観点からすると、オブジェクトとメソッドの数が少なく、最新の標準を使用しない方がはるかに便利です。