다양한 브라우저에서 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

Under IE 브라우저 :

h1 =document.documentElement.scrollHeight; //body 태그의 테두리, 여백 및 안쪽 여백을 포함한 html 태그 아래 콘텐츠의 실제 높이입니다. 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; //브라우저 창의 크기에 따라 웹 페이지 콘텐츠의 표시 부분 높이가 변경됩니다.

h4=document.body.clientHeight; body 태그의 테두리와 여백을 제외한 body 태그의 패딩을 포함한 내용의 높이입니다. h4=document.body.clientHeight; body 태그의 패딩을 포함하여 body 태그의 테두리와 여백을 제외한 내용 // Firefox 탐색 계산 방법은 브라우저와 IE 브라우저 모두 동일합니다. Chrome 브라우저의 계산 방법이 약간 다릅니다.

Chrome 브라우저에서:

h3=document.documentElement.clientHeight; //웹 페이지 콘텐츠의 표시되는 부분의 높이, 브라우저 창 크기 변경에 따라 변경됩니다.​                                                    ' s ' s ' s ' s ' s '를 통해 ' s '를 통해 d'h로 d'h로 d'h로 ‐‐‐ ‐ h4=문서. body.clientHeight; 테두리, 여백, CDuocument.documentelement.OffSetheight 및 Document.Body.OffSetheight를 제외한 body 태그의 안쪽 여백을 포함한 body 태그 아래 콘텐츠의 실제 높이

H5 = Document.documentedLement.offsetheight; // H 본문 태그의 테두리, 여백 및 패딩을 포함하여 TML 라벨 아래 콘텐츠의 실제 높이입니다.

h6=document.body.offsetHeight; h6+margin (body 태그);

Firefox 브라우저에서:

h5= document.documentElement.offsetHeight; 본문 태그의 테두리, 여백 및 패딩을 포함합니다.

h6=document.body.offsetHeight; // 계산 방법은 Firefox 브라우저와 IE 브라우저에서 동일합니다.

Chrome 브라우저에서는

h5=document.documentElement. offsetHeight; //html 태그 아래 콘텐츠 body 태그의 테두리, 여백, 패딩을 포함한 body 태그 아래 콘텐츠의 실제 높이

h6=document.body.offsetHeight; body 태그 아래, 테두리 포함, body 태그 패딩, 여백 제외

계산 결과 ：h5=h6+margin (body 태그의);

위의 세 가지 브라우저,

body 태그의 여백 0, h5=h6;

위 내용은 다양한 브라우저에서 scrollHeight, clientHeight 및 offsetHeight의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!