**offsetTop **Gets the computed top position of the object relative to the layout or parent coordinates specified by the offsetParent attribute.
**The offsetLeft **Gets the calculated left position of the object relative to the layout or parent coordinates specified by the offsetParent attribute.
**offsetHeight **Gets the height of the object relative to the layout or parent coordinates specified by the parent offsetParent attribute. IE, Opera thinks offsetHeight = clientHeight + scroll bar + border. NS and FF think that offsetHeight is the actual height of web content, which can be less than clientHeight.
**offsetWidth **Gets the width of the object relative to the layout or the parent coordinate specified by the parent offsetParent attribute.
**The offsetParent **Gets a reference to the container object that defines the offsetTop and offsetLeft properties of the objects.
**clientHeight **Gets the height of the object without calculating any margins, borders, scrollbars, or padding that might be applied to the object. No one has any problem with clientHeight, except that it’s the height of the viewable area of the content, which means the height of the area where the content can be seen in the page browser, usually the area below the last toolbar and above the status bar, which has nothing to do with the content of the page.
**clientLeft **Gets the distance between the offsetLeft property and the actual left side of the customer area.
clientTop Gets the distance between the offsetTop property and the actual top of the customer area.
clientWidth Gets the width of the object without calculating any margins, borders, scrollbars, or padding that might be applied to the object.
SCROLL properties
scroll Sets or gets whether scrolling is turned off.
scrollHeight Gets the scrolling height of the object.
scrollLeft Sets or gets the distance between the left edge of the object and the far left end of the currently visible content in the window.
scrollTop Sets or gets the distance between the top of the object and the top of the visible content in the window.
scrollWidth Gets the scrolling width of the object. The event attributes x Sets or gets the x pixel coordinates of the mouse pointer position relative to the parent document.
screenX Sets or gets the x coordinate of the position of the mouse pointer relative to the user’s screen
offsetX Sets or gets the x coordinate of the mouse pointer position relative to the object that triggered the event.
clientX Sets or gets the x-coordinate of the mouse pointer position relative to the window’s client area, which does not include the window’s own controls and scroll bars
Here’s how the four browsers explain the clientHeight, offsetHeight, and scrollHeight of document.body. This is document.body, but it’s different if it’s an HTML control.
These four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox).
clientHeight No one has any problem with clientHeight, except that it’s the height of the viewable area of the content, which means the height of the area where the content can be seen in the page browser, usually the area below the last toolbar and above the status bar, which has nothing to do with the content of the page.
offsetHeight IE, Opera thinks offsetHeight = clientHeight + scroll bar + border. NS and FF think that offsetHeight is the actual height of web content, which can be less than clientHeight.
scrollHeight IE and Opera believe that scrollHeight is the actual height of web content, which can be less than clientHeight. NS and FF think that scrollHeight is the height of web content, but the minimum value is clientHeight. In simple terms ClientHeight is the height of the area where the content is viewed through the browser.
NS and FF believe that both offsetHeight and scrollHeight are the height of web content, except that when the height of web content is less than or equal to clientHeight, the value of scrollHeight is clientHeight, while offsetHeight can be less than clientHeight. IE and Opera think offsetHeight is the clientHeight scroll bar with a border. ScrollHeight is the actual height of the page content.
In the same way ClientWidth, offsetWidth, and scrollWidth have the same interpretation as above, except that you can replace the height with the width.
but FF interprets clientHeight differently in different doctypes, while XHTML 1 trasitional does not. Other browsers don’t have this problem.
Js gets the page height
<script>
function getInfo()
{
var s = "";
s += " Page visible area width: "+ document.body.clientWidth;
s += " High visibility area: "+ document.body.clientHeight;
s += " Page visible area width: "+ document.body.offsetWidth + " ( Including the width of the edge and scroll bar )";
s += " High visibility area: "+ document.body.offsetHeight + " ( Including the width of the edges )";
s += " Full text width: "+ document.body.scrollWidth;
s += " Full text of the web page: "+ document.body.scrollHeight;
s += " Web pages are scroll down high (ff) : "+ document.body.scrollTop;
s += " Web pages are scroll down high (ie) : "+ document.documentElement.scrollTop;
s += " Page scroll to the left: "+ document.body.scrollLeft;
s += " On the body of the page: "+ window.screenTop;
s += " Page body part left: "+ window.screenLeft;
s += " High screen resolution: "+ window.screen.height;
s += " Width of screen resolution: "+ window.screen.width;
s += " Screen available workspace height: "+ window.screen.availHeight;
s += " Screen available workspace width: "+ window.screen.availWidth;
s += " Your screen Settings are "+ window.screen.colorDepth +" A color ";
s += " Your screen Settings "+ window.screen.deviceXDPI +" pixel / inches ";
//alert (s);
}
getInfo();
</script>In my local test: It works with IE, FireFox, and Opera Document. Body. ClientWidth Document. Body. ClientHeight Accessible, very simple, very convenient. And in the company’s projects: Opera still USES Document. Body. ClientWidth Document. Body. ClientHeight Internet explorer and FireFox do Document. The documentElement. ClientWidth Document. The documentElement. ClientHeight W3C standards are to blame < ! PUBLIC DOCTYPE HTML ”- / / / / W3C 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. The documentElement. ClientWidth = = > Visible area width Document. The documentElement. ClientHeight = = > Height of visible area
**In FireFox: **Document. Body. ClientWidth = = > BODY object width Document. Body. ClientHeight = = > BODY object height Document. The documentElement. ClientWidth = = > Visible area width Document. The documentElement. ClientHeight = = > Height of visible area
**In the Opera: **Document. Body. ClientWidth = = > Visible area width Document. Body. ClientHeight = = > Height of visible area Document. The documentElement. ClientWidth = = > Page object width (that is, BODY object width plus Margin width) Document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height)
If no W3C standard is defined, then
IE is: Document. The documentElement. ClientWidth = = > 0 Document. The documentElement. ClientHeight = = > 0
**FireFox is: **Document. The documentElement. ClientWidth = = > Page object width (that is, the object of BODY width and Margin wide) document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height)
**The Opera is: **Document. The documentElement. ClientWidth = = > Page object width (that is, the object of BODY width and Margin wide) document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height)
It’s a hassle, but from a development perspective, it’s easier to have fewer objects and methods than to use the latest standards.