offsetTop
Gets the calculated top position of the object relative to the layout or parent coordinates specified by the offsetParent property.
offsetLeft
Gets the calculated left position of the object relative to the layout or parent coordinates specified by the offsetParent property.
offsetHeight
Gets the height of the object relative to the layout or the parent coordinate specified by the offsetParent property.
IE and Opera believe that offsetHeight = clientHeight + scroll bar + border.
NS and FF consider offsetHeight to be the actual height of the web page content, which can be smaller than clientHeight.
offsetWidth
Gets the width of the object relative to the layout or the parent coordinate specified by the offsetParent property.
offsetParent
Gets a reference to the container object that defines the offsetTop and offsetLeft properties of the object.
clientHeight
Gets the height of an object, without counting any margins, borders, scrollbars, or padding that might be applied to the object.
Everyone has no objection to clientHeight. They all think it is the height of the visible area of the content, which means the height of the area where the content can be seen in the page browser. Generally, it is the area below the last toolbar and above the status bar. It 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 client area.
clientTop
Gets the distance between the offsetTop property and the actual top of the client area.
clientWidth
Gets the width of an object, without counting any margins, borders, scrollbars, or padding that might be applied to the object.
SCROLL attribute
scroll
Sets or gets whether scrolling is turned off.
scrollHeight
Get the scroll height of the object.
scrollLeft
Sets or gets the distance between the left edge of the object and the leftmost edge 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 scroll width of the object. event attribute
x
Sets or gets the x-pixel coordinate of the mouse pointer position relative to the parent document.
screenX
Sets or gets the x coordinate of the mouse pointer position 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 client area of the window, where the client area does not include the window's own controls and scroll bars.
Here we talk about the four browsers' interpretation of clientHeight, offsetHeight and scrollHeight of document.body. Here we are talking about document.body. If it is an HTML control, it is different.
These four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox).
clientHeight
Everyone has no objection to clientHeight. They all think it is the height of the visible area of the content, which means the height of the area where the content can be seen in the page browser. Generally, it is the area below the last toolbar and above the status bar. It has nothing to do with the content of the page.
offsetHeight
IE and Opera believe that offsetHeight = clientHeight + scroll bar + border. NS and FF consider offsetHeight to be the actual height of the web page content, which can be smaller than clientHeight.
scrollHeight
IE and Opera consider scrollHeight to be the actual height of web page content, which can be smaller than clientHeight. NS and FF consider scrollHeight to be the height of web page content, but the minimum value is clientHeight. Simply put
clientHeight is the height of the area where the content is viewed through the browser.
NS and FF believe that offsetHeight and scrollHeight are both web content heights, but when the web content height is less than or equal to clientHeight, the value of scrollHeight is clientHeight, and offsetHeight can be less than clientHeight.
IE and Opera consider offsetHeight to be the visible area clientHeight scroll bar plus border. scrollHeight is the actual height of the web page content.
Same reason
The explanations of clientWidth, offsetWidth and scrollWidth are the same as above, just replace the height with the width.
but
FF interprets clientHeight differently in different DOCTYPEs, but xhtml 1 trasitional does not interpret it as above. Other browsers do not have this problem.
js gets page height
Copy the code code as follows:
<script>
function getInfo()
{
vars = "";
s += "Visible area width of web page:"+ document.body.clientWidth;
s += "The height of the visible area of the web page:"+ document.body.clientHeight;
s += "The width of the visible area of the web page: "+ document.body.offsetWidth + " (including the width of the edges and scroll bars)";
s += "The height of the visible area of the web page: "+ document.body.offsetHeight + " (including the width of the side lines)";
s += "Full text width of web page text:"+ document.body.scrollWidth;
s += "Full text height of web page body:"+ document.body.scrollHeight;
s += "The height to which the web page is scrolled (ff):"+ document.body.scrollTop;
s += "The height to which the web page is scrolled (ie):"+ document.documentElement.scrollTop;
s += "The left side of the web page is scrolled:"+ document.body.scrollLeft;
s += "On the main body of the web page: "+ window.screenTop;
s += "Web page text part left:"+ window.screenLeft;
s += "The height of the screen resolution:"+ window.screen.height;
s += "Screen resolution width:"+ window.screen.width;
s += "Screen available work area height:"+ window.screen.availHeight;
s += "Screen available work area width:"+ window.screen.availWidth;
s += "Your screen setting is "+ window.screen.colorDepth +" bit color";
s += "Your screen settings" + window.screen.deviceXDPI +" Pixels/inch";
//alert (s);
}
getInfo();
</script>
In my local test:
Can be used under IE, FireFox, Opera
document.body.clientWidth
document.body.clientHeight
It's available, it's simple, it's convenient.
And among company projects:
Opera still uses
document.body.clientWidth
document.body.clientHeight
But IE and FireFox use
document.documentElement.clientWidth
document.documentElement.clientHeight
It turns out that the W3C standards are causing trouble.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you add this line of tags 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, BODY object width plus Margin width)
document.documentElement.clientHeight ==> Page object height (that is, BODY object height plus Margin height)
And if there is no W3C standard defined, then
IE is:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox is:
document.documentElement.clientWidth ==> Page object width (that is, BODY object width plus Margin width) document.documentElement.clientHeight ==> Page object height (that is, BODY object height plus Margin height)
Opera is:
document.documentElement.clientWidth ==> Page object width (that is, BODY object width plus Margin width) document.documentElement.clientHeight ==> Page object height (that is, BODY object height plus Margin height)
It's really a troublesome thing. In fact, from a development point of view, it would be much more convenient to have fewer objects and methods and not use the latest standards.