JavaScript Webページの配置_JavaScriptスキルの詳細説明

Web ページの表示領域の幅: document.body.clientWidth
Web ページの表示領域の高さ: document.body.clientHeight
Web ページの表示領域の幅Web ページ: document.body.offsetWidth (端の幅を含む)
Web ページの表示領域の高さ: document.body.offsetHeight (端の幅を含む)
の全テキスト幅Web ページ本文: document.body.scrollWidth
Web ページ本文の全文の高さ: document.body.scrollHeight
スクロールされる Web ページの高さ: document.body.scrollTop
スクロールされた Web ページの左側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 属性で指定された親座標を基準とした計算されたオブジェクトの上部位置を取得します
events.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 = 高さ - 境界線

オフセット幅 = 幅

オフセット高さ = 高さ

(言及する必要があります: CSS の margin 属性は clientWidth、offsetWidth、clientHeight、および offsetHeight とは何の関係もありません)

=========================================== === ======

昨日、プロジェクト内の一部のページのレイアウトを変更しましたが、変更後、一部の JS が機能しないことがわかりました。 document.documentElement.clientWidth のようなステートメントを通じて取得されるページ幅は 0 です。グーグルで調べた結果、新しいページには W3C 標準への参照が欠けており、そのため document.documentElement.clientWidth が無効になることがわかりました:

この行のタグをページに追加すると

IE の場合:
document.body.clientWidth ==> BODY オブジェクトの幅
document.body.clientHeight ==> BODY オブジェクトの高さ
document.documentElement. > 可視領域の幅
documentElement.clientHeight ==> 可視領域の高さ

FireFox の場合 document.body.clientWidth ==> ;
document.body.clientHeight ==> BODY オブジェクトの高さ
document.documentElement.clientWidth ==> 表示領域の幅
document.documentElement.clientHeight ==>

Opera の場合:

document.body.clientWidth ==> 表示領域の幅
document.body.clientHeight ==> 表示領域の高さ document.documentElement。 ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅)
document.documentElement.clientHeight ==>gt; ページ オブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)
W3C 標準として定義されていない場合、

IE は:

document.documentElement.clientWidth ==> 0
documentElement.clientHeight ==> 0

FireFox は次のとおりです。
document.documentElement.clientWidth ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅) document.documentElement.clientHeight ==>gt; ページ オブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ) )

オペラは次のとおりです:
document.documentElement.clientWidth ==> ページ オブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅を足したもの) document.documentElement.clientHeight ==> ; ページ オブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)