[セットトップ]offsetHeight,clientHeightとscrollHeightの違い
7596 ワード
ネットで検索してみると、結論は非常に漠然としていて、IEはバージョンを話さないので、自分でテストして結論をアップロードしました.以下の結論はいずれも標準モードで試験に合格し、quirkモードは試験されなかった.
clientHeight
ほとんどのブラウザはclientHeightに異議はなく、要素が表示される領域の高さ、すなわち要素やウィンドウでコンテンツが表示される領域の高さ、すなわちコンテンツが表示される領域を指し、スクロールバーは含まれていないと考えています.しかしpaddingは含まれていることに注意してください.計算方法は、clientHeight=topPadding+bottomPadding+height-水平スクロールバーの高さです.
offsetHeight
IE 6,IE 7,IE 8,IE 9および最新のFF,Chromeでは,一般要素に対してoffsetHeight=padding+height+border=clientHeight+スクロールバー+ボーダーである.
scrollHeight
scrollHeightの議論は比較的大きく、一部のブラウザはscrollHeightがclientHeightより小さくてもよいと考え、一部のブラウザはscrollHeightが少なくともclientHeightに等しいと考えている.しかし、scrollHeight>=topPadding+bottomPadding+コンテンツmargin boxの高さは同じです.ブラウザでの違いは次のとおりです.
IE 6、IE 7は、scrollHeightはコンテンツの高さであり、clientHeightより小さくてもよいと考えている.
FFはscrollHeightがコンテンツ高さであると考えているが,最小値はclientHeightである.
注意:以上は一般的な要素で方言で、bodyとdocumentElementのclientHeight、offsetHeight、scrollHeightはブラウザごとに計算方法が異なります.
すべてのブラウザで、ウィンドウの表示部分の高さを取得するにはdocumentElementを使用します.なぜならClientHeightはその内容によって決まります.
FF30
注意:Firefox 30では、水平スクロールバーの幅は17ピクセルです.
body
offsetHeight = body.padding + body.border + body.height(CSS設定またはコンテンツサポート);
clientHeight = body.padding + body.height(CSS設定またはコンテンツサポート);
scrollHeight >= clientHeight;
documentElement
offsetHeight = body.offsetHeight + body.margin;
ClientHeight=windowウィンドウの表示高さ;
scrollHeight >= clientHeight
したがって、ウィンドウの可視高さを取得するだけで、FFではdocumentElementを用いる.ClientHeight、ページ全体の高さを取得するにはdocumentElementを使用します.scrollHeight.
要素
offsetHeight = padding +border + height;
ClientHeight=padding+height-水平スクロールバーの高さ.
scrollHeight >=clientHeight
まとめ:body,documentElement,要素の結果分析から,FireFoxはscrollHeightの最小高さがclientHeightであると考えた.
offsetLeft=要素borderの左上隅からwindowウィンドウの原点までの距離、またはoffsetParentのborder boxの上部までの距離.
Chrome 39
注意:Chrome 39では、水平スクロールバーの幅は17ピクセルです.
body
offsetHeight = body.padding+ body.border + body.height(CSS設定または内容が大きい);
clientHeight= body.pdding + body.height(CSS設定または内容が大きい);
scrollHeight >= offsetHeight; さらにscrollHeight>=windowウィンドウの表示高さ;
bodyにコンテンツがない場合(空):
body.offsetHeight == documentElement.offsetHeight;
body.clientHeight ==documentElement.clientHeight;
body.scrollHeight ==documentElement.scrollHeight;
また、上記のプロパティの値は、ブラウザのウィンドウの高さです.
documentElement
offsetHeight = scrollHeight = body.offsetHeight+ body.margin;
ClientHeight=windowウィンドウの表示高さ;
bodyの内容が短すぎる場合、documentElementのoffsetHeightとscrollHeightはclientHeightより小さくなります.
したがって、ページウィンドウの可視部分の高さを取得するだけで、ChromeでdocumentElementを使用する.clientHeight;ページ全体の最大高さ(ウィンドウより小さい場合は、ウィンドウの高さを取る)を取得するにはbodyを使用します.scrollHeight;ページの内容の実際の高さを取得するにはbodyを使用する.offsetHeight().
要素
offsetHeight = padding + border + height;
ClientHeight=padding+height-水平スクロールバーの高さ;
scrollHeight >= clientHeight;
offsetLeft=要素borderの左上隅からキャンバスの原点までの距離、またはoffsetParentのborder boxの上部までの距離.
IE9
注:IE 9では、スクロールバーの幅は17ピクセルです.
body
offsetHeight = body.padding +body.border + body.height(CSS設定または内容が大きい);
clientHeight = body.padding + body.height(CSS設定または内容が大きい);
scrollHeight >= clientHeight;
documentElement
offsetHeight=clientHeight+水平スクロールバーの高さ;
ClientHeight=windowウィンドウの表示高さ
scrollHeight>=clientHeight、scrollHeight>=body.offsetHeight
したがって、windowウィンドウの可視高さを取得するだけで、IE 9でdocumentElementを使用する.ClientHeight、ページ全体のコンテンツの高さを取得するにはdocumentElementを使用します.scrollHeight.
要素
offsetHeight = padding +border + height.
ClientHeight=padding+height-スクロールバーの幅.
scrollHeight >=clientHeight;
まとめ:body,documentElement,要素の結果分析から,IE 9はscrollHeightの最小高さがclientHeightであると考えられる.
結果解析から,IE 9はscrollHeightの最小高さがclientHeightであると考えた.
IE8
注:IE 8では、スクロールバーの幅は17ピクセルです.
body
offsetHeight = body.padding +body.border + body.height(CSS設定または内容が大きい);
clientHeight = body.padding + body.height(CSS設定または内容が大きい);
scrollHeight >= clientHeight;
documentElement
offsetHeight=clientHeight+水平スクロールバーの高さ+body.border
ClientHeight=windowウィンドウの表示高さ
scrollHeight>=clientHeight、scrollHeight>=body.offsetHeight
したがって、ウィンドウの可視高さを取得するだけで、IE 8においてdocumentElementが使用する.ClientHeight、ページ全体のコンテンツの高さを取得するにはdocumentElementを使用します.scrollHeight.
要素上
offsetHeight = padding +border + height.
ClientHeight=padding+height–水平スクロールバーの高さ.
scrollHeight >=clientHeight
結果解析から,IE 8はscrollHeightの最小高さがclientHeightであると考えた.
offsetLeft=要素borderの左上隅からキャンバスの原点までの距離、またはoffsetParentのborder boxの上部までの距離.
IE7
注:IE 7では、スクロールバーの幅は17画素です.
body
offsetHeight = body.padding + body.border+ body.height(CSS設定または内容が大きい);
clientHeight = body.height +body.padding–水平スクロールバーの高さ;
scrollHeight=コンテンツmargin boxの高さ;
documentElement
offsetHeight=clientHeight=windowウィンドウの表示高さ;
scrollHeight = body.offsetHeight+ body.margin;
したがって、ウィンドウの可視部分の高いを取得するだけで、IE 7ではdocumentElementが使用する.ClientHeight,ページ全体のサイズを取得するにはdocumentElement.scrollHeight.
要素
offsetHeight = padding +border + height.
clientHeight = padding +height - scrollbar.width.
scrollHeight=padding+コンテンツmargin boxの高さ
結果の分析から、IE 7はscrollHeightがclientHeightより小さいと考えられる.
offsetLeft=要素border boxの左上から親コンテナ(offsetParentではない)のborder boxの左上までの距離.
IE6
body
offsetHeight = body.padding+コンテンツmargin boxの高さ.
clientHeight = scrollHeight
documentElement
offsetHeight=キャンバスの高さですが、offsetHeight>=clientHeight
ClientHeight=windowウィンドウの表示高さ.
scrollHeight=コンテンツの高さ
したがって、ページウィンドウのサイズを取得するだけで、IE 6でdocumentElementを使用する.ClientHeight、ページ全体のサイズを取得するにはdocumentElementを使用します.offsetHeight.
要素
offsetHeight = padding +border + height.
clientHeight = padding +height - scrollbar.width.
scrollHeight=padding+コンテンツmargin boxの高さ
結果の分析から、IE 6はscrollHeightがclientHeightより小さいと考えられる.
offsetLeft=要素border boxの左上から親コンテナ(offsetParentではない)のborder boxの左上までの距離.
結論
l IE 6、IE 7はscrollHeightがclientHeightより小さくてもよいと考えている.
l IE 8、IE 9、FirefoxはscrollHeight>=clientHeightと考えている.
l窓の見える部分の高さを取り、documentElementを統一する.ClientHeightでいいです.
lページの内容の高さ(ウィンドウの高さよりも小さい場合はウィンドウの高さ)を取るにはdocumentElement.scrollHeight、Chromeだけがbodyを使う必要があります.scrollHeight.
同理
ClientWidth、offsetWidth、scrollWidthの解釈は上記と同じで、高さを幅に変えるだけです./**
* Figure out if current document is in quirks mode.
* @param a: document object
*/
function isQuirksMode(doc) {
// In IE6,IE7,IE8,IE9,IE10 Firefox and Chrome browsers, document.compatMode has two values: "BackCompat", "CSS1Compat".
return doc.compatMode && doc.compatMode.indexOf("CSS") != -1;
}
/**
* Get the visible height of the whole document or window.
*/
function getDocumentClientHeight(doc) {
// in IE quirks mode, documentElement.clientHeight == 0
return isQuirksMode(a) ? doc.body.clientHeight : doc.documentElement.clientHeight;
}
/**
* Get the page height, if content's height is smaller than window's height, use window's height.
*/
function getPageHeight(doc) {
// for IE and Firefox, use documentElement.scrollHeight, Chrome use body.scrollHeight.
return Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight);
}
/**
* Figure out if current document is in quirks mode.
* @param a: document object
*/
function isQuirksMode(doc) {
// In IE6,IE7,IE8,IE9,IE10 Firefox and Chrome browsers, document.compatMode has two values: "BackCompat", "CSS1Compat".
return doc.compatMode && doc.compatMode.indexOf("CSS") != -1;
}
/**
* Get the visible height of the whole document or window.
*/
function getDocumentClientHeight(doc) {
// in IE quirks mode, documentElement.clientHeight == 0
return isQuirksMode(a) ? doc.body.clientHeight : doc.documentElement.clientHeight;
}
/**
* Get the page height, if content's height is smaller than window's height, use window's height.
*/
function getPageHeight(doc) {
// for IE and Firefox, use documentElement.scrollHeight, Chrome use body.scrollHeight.
return Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight);
}