The differences between scrollHeight, clientHeight and offsetHeight in various browsers

Document.body is the body node in the Document object in the DOM, and document.documentElement is a reference to the root node (html) of the document object.

The following content was tested under , all are personal test results~

The browser versions are: IE11, Firefox 53.0.3 (64-bit), chrome 58.0. 3029.110 (64-bit)

Test program js part code:

1.Comparison between document.documentElement.scrollHeight and document.body.scrollHeight

Under IE browser:

h1=document.documentElement.scrollHeight ; //The actual height of the content under the html tag, including the border, margin, and padding of the body tag;

h2=document.body.scrollHeight; //The actual height of the style including padding under the body tag, not Including the border and margin of the body tag;

Calculation result: h1=h2+upper and lower borders (borders of the body)+upper and lower margins (inner margins of the body);

Under Firefox browser:

h1= document.documentElement.scrollHeight; //The actual height of the content under the html tag, including the border, margin, and padding of the body tag;

h2=document.body.scrollHeight; //body The actual height of the style including padding under the tag, excluding the border and margin of the body tag;

Calculation result: h1=h2+upper and lower border (body's border) + upper and lower margin (body's inner margin);

// The calculation method is the same in both Firefox browser and IE browser. The calculation method in Chrome browser is slightly different.

Under Chrome browser:

h1=document.documentElement.scrollHeight; //The actual height of the content under the html tag, including the border, margin, and padding of the body tag;

h2=document.body.scrollHeight;

Calculation result: h1=h2;

2.document.documentElement.clientHeight and document. Comparison of body.clientHeight

Under IE browser:

h3=document.documentElement.clientHeight; //The height of the visible part of the web page content changes with the size of the browser window Changes with changes

h4=document.body.clientHeight;

Under Firefox browser:

h3= document.documentElement.clientHeight; //The height of the visible part of the web page content changes with the change of the browser window size

h4=document.body.clientHeight; //The actual height of the content under the body tag, including the padding of the body tag, excluding the border and margin of the body tag;

/ / The calculation method is the same in both Firefox browser and IE browser. The calculation method in Chrome browser is slightly different.

Under Chrome browser:

h3=document.documentElement .clientHeight; //The height of the visible part of the web page content changes with the size of the browser window

h4=document.body.clientHeight; //The actual height of the content under the body tag, including the body tag padding, excluding the border and margin of the body tag;

3.

document.documentElement.offsetHeight and document.body.offsetHeight comparison

Under IE browser:

h5=document.documentElement.offsetHeight; //The content under the html tag Actual height, including the border, margin, and padding of the body tag;

h6=document.body.offsetHeight; //The actual height of the content under the body tag, including the border, padding of the body tag, excluding margin;

Calculation result: h5=h6+margin(body tag);

Firefox browser:

h5=document.documentElement.offsetHeight; //Content under the html tag The actual height, including the border, margin, and padding of the body tag;

h6=document.body.offsetHeight; //The actual height of the content under the body tag, including the border and padding of the body tag, excluding margin;

Calculation result: h5=h6+margin(body tag );

// The calculation method is the same in both Firefox browser and IE browser, but the calculation method of Chrome browser is slightly different

Chrome browser Bottom:

h5=document.documentElement.offsetHeight; //The actual height of the content under the html tag, including the border, margin, and padding of the body tag;

h6=document.body.offsetHeight; //The actual height of the content under the body tag, including the border and padding of the body tag, excluding margin;

Calculation result: h5=h6+margin (of the body tag);

The above three A browser, When the margin of the body tag is 0, h5=h6;

The above is the detailed content of The differences between scrollHeight, clientHeight and offsetHeight in various browsers. For more information, please follow other related articles on the PHP Chinese website!