さまざまなブラウザでのscrollHeight、clientHeight、およびoffsetHeightの違い

document.body は DOM の Document オブジェクトの本文ノードであり、document.documentElement はドキュメント オブジェクトのルート ノード (html) への参照です。

以下のコンテンツは でテストされており、すべて個人的なテスト結果です~

ブラウザのバージョンは次のとおりです: IE11、Firefox 53.0.3 (64 ビット)、chrome 58.0.3029.110 (64 ビット)

テストプログラムのjsコード:

1.document.documentElement.scrollHeight と document.body.scrollHeight の比較

IE ブラウザーの場合:

h1 =document.documentElement.scrollHeight; //body タグの境界線、マージン、パディングを含むコンテンツの実際の高さ

h2=document.body.scrollHeight; body タグの下のパディングを含むスタイルの実際の高さ (body タグのボーダーとマージンを除く)

計算結果: h1=h2+上下のボーダー (ボディのボーダー) + 上下のマージン (ボディの内側のマージン);

Firefox ブラウザ:

h1= document.documentElement .scrollHeight; //body タグのボーダー、マージン、パディングを含む、HTML タグの下のコンテンツの実際の高さ

h2=document.body.scrollHeight; ; // body タグの下のパディングを含むスタイルの実際の高さ、body Border、ラベルのマージンを除く

計算結果: h1=h2+上下のマージン (ボディのボーダー) + 上下のマージン (内側のマージン) of body);

// Firefox ブラウザと IE ブラウザの計算方法は同じですが、Chrome ブラウザの計算方法は少し異なります

Chrome ブラウザの場合:

h1=document.documentElement.scrollHeight; //body タグのボーダー、マージン、パディングを含む、HTML タグの下のコンテンツの実際の高さ

h2=document.body.scrollHeight と Element.clientHeight と document.body.clientHeight の比較

;

IE ブラウザ下:

h3=document.documentElement.clientHeight; //Web ページのコンテンツの表示部分の高さはブラウザ ウィンドウのサイズに応じて変化します h4=document.body.clientHeight; // body タグの下のコンテンツの高さ (body タグのパディングを含み、body タグの境界線とマージンを除く)。サイズの変更に応じて変化します //実際の高さbody タグのボーダーとマージンを除いた、body タグの下のコンテンツChrome ブラウザの計算方法は若干異なります Chrome ブラウザの場合:

h3=document.documentElement.clientHeight; //Web ページのコンテンツの表示部分の高さ、ブラウザのウィンドウ サイズの変更に応じて変化します。 h4 = document.body.clientheight; body.clientHeight; // body タグの下のコンテンツの実際の高さ (body タグのパディングを含み、境界線、マージン、CDuocument.documentelement.Offsetheight および Document.body.Offsetheight の比較を除く)

H5 = Document.documentedLement.offsetheight; // H 本体タグのボーダー、マージン、パディングを含む、TML ラベルの下のコンテンツの実際の高さ。

h6=document.body.offsetHeight; h6+margin (body タグの);

Firefox ブラウザの場合:

h5= document.documentElement.offsetHeight; // HTML タグの下のコンテンツの実際の高さ。 bodyタグのボーダー、マージン、パディング

h6=document.body.offsetHeight; // 計算方法は Firefox ブラウザと IE ブラウザで同じです。

Chrome ブラウザの場合:

h5=document.documentElement。 offsetHeight; //html タグの下のコンテンツ body タグの境界線、マージン、パディングを含むコンテンツの実際の高さ

h6=document.body.offsetHeight; // コンテンツの実際の高さbodyタグの下、ボーダーを含む、bodyタグのパディング、マージンを除く

計算結果：h5=h6+margin(bodyタグの);

上記3つのブラウザでは、

bodyタグのマージンがは 0、h5=h6;

以上がさまざまなブラウザでのscrollHeight、clientHeight、およびoffsetHeightの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。