Detailed explanation on how to use js to obtain web page height and conventional margin calculations

How do js or jquery get the common height or width of a web page? The editor summarized it and let’s take a look.

##Visible area width of web page: document.body.clientWidth;
The height of the visible area of ​​the web page: document.body.clientHeight;
The width of the visible area of ​​the web page: document.body.offsetWidth (including the width of the edge);
Height of the visible area of ​​the webpage: document.body.offsetHeight (including the width of the edge);
Full text width of the webpage body: document.body.scrollWidth;
Full text height of the webpage text: document.body.scrollHeight;
The height of the webpage being scrolled: document.body.scrollTop;
The left side of the webpage being scrolled: document.body.scrollLeft;
Top of the main body of the web page: window.screenTop;
Left of the main body of the web page: window.screenLeft;
The height of the screen resolution: window.screen.height;
The width of the screen resolution: window.screen.width;
The height of the screen available work area: window .screen.availHeight;
Screen available work area width: window.screen.availWidth;

scrollHeight: Get the scroll height of the object.
scrollLeft: Sets or gets the distance between the left edge of the object and the leftmost end of the currently visible content in the window
scrollTop: Sets or gets the distance between the topmost and The distance between the top of the visible content in the window
scrollWidth: Gets the scroll width of the object
offsetHeight: Gets the object relative to the layout or specified by the parent coordinates offsetParent property The height of the parent coordinate
offsetLeft: Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the offsetParent property
offsetTop: Gets the object's relative position to the layout Or the calculated top position of the parent coordinate specified by the offsetTop attribute
event.clientX Horizontal coordinates relative to the document
event.clientY Vertical coordinates relative to the document

event.offsetX horizontal coordinate relative to the container
event.offsetY vertical coordinate relative to the container
document.documentElement.scrollTop vertical The value of directional scrolling
event.clientX+document.documentElement.scrollTop The horizontal coordinate relative to the document + the amount of vertical scrolling
Post by molong on 2009-05 -19 11:57 PM #1

To get the vertical coordinate position of the scroll bar on the current page, use:
document.documentElement.scrollTop;
Instead of:
document.body.scrollTop;
documentElement corresponds to the html tag, and body corresponds to the body tag.

Under standard w3c, document.body.scrollTop is always 0 and needs to be replaced by document.documentElement.scrollTop;
If you want to position the mouse Relative to the absolute position of the page, you will find that 999.99 of the 1,000 articles in Google will let you use event.clientX+document.body.scrollLeft, event.clientY+document.body.scrollTop. If you find that your mouse Please don’t be surprised if the positioning deviates from your imagination, this is completely normal.
The document.body.scrollX object is no longer supported after ie5.5.
So when programming, please add this judgment

if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft;    
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}

The above is the detailed content of Detailed explanation on how to use js to obtain web page height and conventional margin calculations. For more information, please follow other related articles on the PHP Chinese website!