document.body と document.documentElement によって考えられた _javascript トリック

document.compatMode については、私と同じように、その存在は知っていても、その目的を知らない友人も多いかもしれません。実際、これは互換性のある Web ページを開発するのに非常に役立ちます。Doctype を宣言しないと、ブラウザーはデフォルトで Quirks モードになるため、ボックス モデルのレンダリングが大きく異なることは誰もが知っています。したがって、互換性の理由から、現在のドキュメントのレンダリング方法を取得する必要がある場合があります。
document.compatMode には、BackCompat と CSS1Compat という 2 つの戻り値があり、次のように説明されています。
BackCompat 標準準拠モードはオンになっていません (Quirks モード)
CSS1Compat Standards-準拠モードがオンになります (標準モード)
ドキュメントに標準宣言がある場合、document.compatMode の値は「CSS1compat」に等しいため、ドキュメントが追加されたかどうかは、 の値に基づいて判断できます。 document.compatMode 標準宣言
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight
ドキュメントに標準宣言がある場合、Firefox の style.top およびその他の設定「px」などの単位を追加する必要があります。入力しないと認識されません。ここまで述べたので、さらに詳しく説明しましょう。 Firefox の場合:
1. offsetTop は数値を返しますが、style.top は数値に加えて単位 px も返します。
2. offsetTop は読み取り専用ですが、style.top は読み取り/書き込み可能です。
3. HTML 要素にトップ スタイルが指定されていない場合 (CSS で設定されている場合でも)、style.top は空の文字列を返します。
offsetLeft と style.left、offsetWidth と style.width、offsetHeight と style.height にも同じことが当てはまります。
それらの違いについて話しましょう:
インターネット上で何度も転載されている次の段落をご覧になったことがあるかもしれません。ここでも拝借します:

.Kfk428 { display:none; } 
网页可见区域宽： document.body.clientWidth; 
网页可见区域高： document.body.clientHeight; 
网页可见区域宽： document.body.offsetWidth (包括边线的宽); 
网页可见区域高： document.body.offsetHeight (包括边线的宽); 
网页正文全文宽： document.body.scrollWidth; 
网页正文全文高： document.body.scrollHeight; 
网页被卷去的高： document.body.scrollTop; 
网页被卷去的左： document.body.scrollLeft; 
网页正文部分上： window.screenTop; 
网页正文部分左： window.screenLeft; 
屏幕分辨率的高： window.screen.height; 
屏幕分辨率的宽： window.screen.width; 
屏幕可用工作区高度： window.screen.availHeight; 
屏幕可用工作区宽度：window.screen.availWidth;

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 = width + padding 
clientHeight = height + padding 
offsetWidth = width + padding + border 
offsetHeight = height + padding + border 
IE5.0/5.5： 
clientWidth = width - border 
clientHeight = height - border 
offsetWidth = width 
offsetHeight = height

(これについては言及する必要があります: CSS の margin 属性。clientWidth、offsetWidth、clientHeight、および offsetHeight とは関係ありません)

ドキュメントタイプを設定した後は異なる場合があります。

上記は _javascript スキルを考慮して作成されています。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。