Internet Explorer and FF JavaScript to get the difference between page size and window _javascript tips

Under the newly defined standard document.documentElement.clientHeight can get the correct values in both IE and Firefox, the following article details the difference between getting the size of a browser-visible window:

<script language= "JavaScript" >
function GetInfo ()
{
var s = "";
s = = "Web page visible area wide:" +Document.body.clientWidth;
S + + "Web page visible Area High:" +Document.body.clientHeight;
S + + "Web page visible area wide:" + Document.body.offsetWidth + "(including the edge and the width of the scroll bar)";
s + + "page visible Area High:" + Document.body.offsetHeight + "(including the edge of the width)";
s + + "page text full text width:" + document.body.scrollWidth;
s + + "page full text High:" + document.body.scrollHeight;
S + + "Web page is rolled high (FF):" + document.body.scrollTop;
S + + "Web page is rolled high (ie):" + document.documentElement.scrollTop;
S + + "The page is rolled away to the left:" + document.body.scrollLeft;
s + + "page body part:" + window.screentop;
s + + "page body part left:" + window.screenleft;
S + + "screen resolution of High:" + window.screen.height;
S + + "screen resolution width:" + window.screen.width;
S + + screen available work area height: + window.screen.availHeight;
s = = "screen available working area width: + window.screen.availWidth;"
S + + "your screen setting is" + window.screen.colorDepth + "bit color";
S + + "your screen settings" + Window.screen.deviceXDPI + "pixel/inch";
alert (s);
}
GetInfo ();
</script>

In a local test:
In IE, FireFox, opera can be used
Document.body.clientWidth
Document.body.clientHeight
Can be obtained, very simple, very convenient.

And in the company project:
Opera still uses
Document.body.clientWidth
Document.body.clientHeight
But IE and Firefox use
Document.documentElement.clientWidth
Document.documentElement.clientHeight

<! DOCTYPE HTML PUBLIC "-//the//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">
If you add this line of markup to the page

In IE:
Document.body.clientWidth ==> Body Object width
Document.body.clientHeight ==> Body Object Height
Document.documentElement.clientWidth ==> Visible Area width
Document.documentElement.clientHeight ==> Visible Area height
In Firefox:
Document.body.clientWidth ==> Body Object width
Document.body.clientHeight ==> Body Object Height
Document.documentElement.clientWidth ==> Visible Area width
Document.documentElement.clientHeight ==> Visible Area height

In Opera:
Document.body.clientWidth ==> Visible Area width
Document.body.clientHeight ==> Visible Area height
Document.documentElement.clientWidth ==> Page Object width (that is, the body object width plus margin width)
Document.documentElement.clientHeight ==> Page Object height (that is, height of the body object plus margin high)

Suppose that obj is an HTML control.

Obj.offsettop refers to the position, integer, and pixel of the obj from the top or upper control.

Obj.offsetleft refers to the position, integer, and pixel of obj from the left or upper control.

Obj.offsetwidth refers to the width, integer, and unit pixel of the obj control itself.

Obj.offsetheight refers to the height, integer, and unit pixel of the obj control itself.

We describe the above or upper and left or upper controls as mentioned above.

For example:
<div id= "Tool" >
<input type= "button" value= "Submit" >
<input type= "button" value= "Reset" >
</div>

The offsettop of the submit button refers to the distance from the top border of the tool layer, because the top edge of the "tool" layer is the closest to the top of the "the".
offsettop of the reset button refers to the distance from the "reset" button to the top border of the tool layer, because the top edge of the "tool" layer is closest to the top.

The offsetleft of the submit button refers to the distance from the left border of the tool layer, because the closest to the left of the "tool" layer is the left border.
Offsetleft of the reset button refers to the distance from the right border of the submit button, because the right border of the submit button is closest to the left of the "reset" button.

Offsettop can get the position of the HTML element distance above or the outer element, Style.top is also OK, the difference is:

One, offsettop return is a number, and Style.top returns a string, in addition to the number of units: px.

Second, offsettop read only, and Style.top can read and write.

Third, if the HTML element has not been specified with the top style, then Style.top returns an empty string.

The same is true of Offsetleft and Style.left, offsetwidth and Style.width, Offsetheight and Style.height.

ScrollHeight: Gets the scrolling height of the object.
ScrollLeft: Sets or gets the left distance between the left edge of an object and the current visible content in the window
ScrollTop: Sets or gets the distance between the top of the object and the topmost part of the visible content in the window
ScrollWidth: Gets the scrolling width of the object
Offsetheight: Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate offsetparent property
Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinates specified by the Offsetparent property
offsettop: Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property
Event.clientx the horizontal coordinates of the relative document
Event.clienty vertical coordinates relative to document

The horizontal coordinates of the event.offsetx relative to the container
The vertical coordinates of the event.offsety relative to the container
Document.documentElement.scrollTop The vertical scrolling value
Event.clientx+document.documentelement.scrolltop relative to the document's horizontal coordinates + vertical scrolling amount

Above mainly refers to IE, the Firefox difference is as follows:
IE6.0, ff1.06+:
clientwidth = width + padding
clientheight = height + padding
off SetWidth = width + padding + border
offsetheight = height + padding + border
ie5.0/5.5:
clientwidth = width- Border
ClientHeight = height-border
offsetwidth = width
offsetheight = height
(need to mention: the margin attribute in CSS, and Clie Ntwidth, Offsetwidth, clientheight, offsetheight are irrelevant)