Explanation of clientHeight, offsetHeight, scrollHeight, clientWidth, offsetWidth and scrollWidth

Differences in interpretation of clientHeight, offsetHeight, scrollHeight
, clientWidth, offsetWidth and scrollWidth among four browsers : document.body.clientHeight Width of the visible area of ​​the web page: document.body.offsetWidth (including the width of the border) Height of the visible area of ​​the web page: document.body.offsetHeight (including the width of the border) Full text width of the web page body: document.body.scrollWidth The body of the web page Full text height: document.body.scrollHeight web page scrolled height: document.body.scrollTop web page scrolled left: document.body.scrollLeft web page body part: window.screenTop web page body part left: window.screenLeft screen resolution rate height: window.screen.height width of screen resolution: window.screen.width screen available workspace height: window.screen.availHeight screen available workspace width: window.screen.availWidth















Here are four browsers' explanations of clientHeight, offsetHeight and scrollHeight of document.body.

The four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox).

ClientHeight The four browsers have no objection to the interpretation of clientHeight
. They all think it is the height of the visible area of ​​​​the content, that is to say, the height of the area where the content can be seen in the page browser, generally from the last toolbar to the status This area above the bar has nothing to do with the page content.

offsetHeight
IE, Opera think that offsetHeight = clientHeight + scroll bar + border.
NS and FF think that offsetHeight is the actual height of web page content, which can be smaller than clientHeight.

scrollHeight
IE and Opera think that scrollHeight is the actual height of web page content, which can be smaller than clientHeight.
NS and FF think that scrollHeight is the height of web page content, but the minimum value is clientHeight.

Simply put,
clientHeight is the height of this area of ​​the content viewed through the browser.
NS and FF think that both offsetHeight and scrollHeight are the height of web page content, but when the height of web page content is less than or equal to clientHeight, the value of scrollHeight is clientHeight, and offsetHeight can be smaller than clientHeight.
IE and Opera think that offsetHeight is the border of the scroll bar of the visible area clientHeight. scrollHeight is the actual height of the page content.

Similarly
, the explanations of clientWidth, offsetWidth and scrollWidth are the same as above, just replace the height with the width.


Note: The above is also translated, it is just a reference for yourself, some values ​​depend on the page mode! The Ajax I use is completely unable to use the above method to set the height!

JavaScript window properties:
Width of the visible area of ​​the
web page: document.body.clientWidth Height
of the visible area of ​​the
web page: document.body.clientHeight (Including the width of the border) The
full text width of the
webpage body: document.body.scrollWidth The full text height of the webpage body: document.body.scrollHeight
The height of the
webpage being scrolled: document.body.scrollTop The left side of the webpage being scrolled: document.body.scrollLeft
On the page body part: window.screenTop
page body part left: window.screenLeft
The height of the
screen resolution: window.screen.height The width of the screen resolution: window.screen.width
Screen available workspace height: window.screen.availHeight
Screen available workspace width: window.screen.availWidth can be obtained by using document.body.clientWidth document.body.clientHeight


under IE, FireFox, Opera , very simple, very Convenience. In the company's project: Opera still uses document.body.clientWidth document.body.clientHeight but IE and FireFox use document.documentElement.clientWidth document.documentElement.clientHeight turns out to be the W3C standard. http://www.w3 .org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 1. What determines the value of clientHeight and offsetHeight? If we have the following DIV, the main text displayed is "This is the main body of DIV".




















































As shown in the figure above, the value of clientHeight is determined by the actual height of the DIV content and the padding value in CSS, while the value of offsetHeight is determined by the actual height of the DIV content, the padding value in CSS, the height of the scrollbar and the border value of the DIV; as for The margin value in CSS will not affect the value of clientHeight and offsetHeight.



2. What effect does the Height value in CSS have on clientHeight and offsetHeight?

First, let's take a look at what height is defined by Height in CSS. As in the last part of this article "APPENDIX sample code" (Note: hereinafter referred to as "sample code"), the Height value of innerDIVClass is set to 50px, and the calculated value under IE is as follows. That is to say, in IE, the Height value in CSS defines the height of the DIV including padding (that is, the value of offsetHeight); in Firefox, the Height value in CSS only defines the height of the actual content of the DIV, and padding does not Included in this value (70 = 50 + 10 * 2).



in IE:
innerDiv.clientHeight: 46
innerDiv.offsetHeight: 50
outerDiv.clientHeight: 0
outerDiv.offsetHeight: 264

in Firfox:
innerDiv.clientHeight: 70
innerDiv.offsetHeight: 74
outerDiv.clientHeight: 348
outerDiv.offsetHeight: 362




In the above example, you may be wondering why the value of outerDiv.clientHeight is 0 in IE. That is because in the sample code, the Height value of outerDIVClass is not defined. At this time, in IE, the value of clientHeight cannot be calculated. Also, in the sample code, if the Height value in innerDIVClass is last year, the value of innerDIV.clientHeight is also 0. (Note: this does not exist under Firefox).

What if the Height value in CSS is less than the height of the content to be displayed in the DIV (when there is no overflow behavior defined in CSS)? In IE, the value of the entire clientHeight (or offsetHeight) has no effect, and the DIV will be automatically stretched; in Firefox, the DIV will not be stretched. For example, in the sample code, the Height value of innerDivClass is set to 0, and the calculation result is as follows. The DIV in IE is stretched, and its clientHeight value is equal to the sum of the height of the content and padding*2; while in Firefox, the text will overflow the boundary of the DIV, and its clientHeight value is exactly twice the padding value.


  In IE:
innerDiv.clientHeight: 38
innerDiv.offsetHeight: 42
outerDiv.clientHeight: 0
outerDiv.offsetHeight: 256

In Firefox:
innerDiv.clientHeight: 20
innerDiv.offsetHeight: 24
outerDiv.clientHeight: 298
outerDiv.offsetHeight: 312



APPENDIX　示例代码


<html>
<head>
<style type="text/css">......
.innerDivClass
{...}{...}{...}{
      color: red;
      margin: 37px;
      padding: 10px;
      border: 2px solid #000000;
      height: 50px;


}
.outerDivClass
{...}{...}{...}{
      padding: 100px;
      margin: 200px;
      border: 7px solid #000000;
}
</style>

<script>......
function checkClientHeight()
......{
      var innerDiv = document.getElementById("innerDiv");
      var outerDiv = document.getElementById("outerDiv");

      result.innerHTML = "innerDiv.clientHeight: " + innerDiv.clientHeight + "<br />";
      result.innerHTML += "innerDiv.offsetHeight: " + innerDiv.offsetHeight + "<br />";
      result.innerHTML += "outerDiv.clientHeight: " + outerDiv.clientHeight + "<br />";
      result.innerHTML += "outerDiv.offsetHeight: " + outerDiv.offsetHeight + "<br />";
}
</script>
</head>
<body>
<div id="outerDiv" class="outerDivClass">
<div class="innerDivClass" id="innerDiv">
Hello world.         
</div>
</div>
<p></p>
<div id="result">
</div>
<input type="button" onclick="checkClientHeight()" text="Click Me" Value="Click Me" />
</body>
</html>