Javascript obtains the size and position parameters of the window (container) enumeration and brief description_Basic knowledge

Javascript obtains the size and position of the window (container). There are many things, which are easy to confuse. Here is a list and brief description:

Attribute method description:
clientX relative documentation The horizontal coordinate of The scroll height;
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 edge of the object and the topmost visible content in the window distance;
offsetWidth gets the width of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent property;
offsetHeight gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent property;
offsetLeft gets the calculated left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute;
offsetTop gets the calculated top position of the object relative to the layout or the parent coordinate specified by the offsetTop attribute.


Javascript method to obtain screen and window size
:
Height of screen resolution: window.screen.height;
Width of screen resolution: window.screen.width;
Height of screen available work area (excluding the taskbar): window.screen.availHeight; Width of the available work area of ​​the screen (excluding the taskbar): window.screen.availWidth; Width of the visible area of ​​the web page (excluding scroll bars and borders): document.body.clientWidth;
The height of the visible area of ​​the web page (excluding scroll bars and borders): document.body.clientHeight;
The width of the visible area of ​​the web page (including scroll bars and borders): document.body.offsetWidth;
Height of the visible area of ​​the web page (including scroll bars and borders): document.body.offsetHeight;
Web page body width: document.body.scrollWidth;
Web page body height: document.body.scrollHeight;
Web page The height to be scrolled: document.body.scrollTop;
The left side to be scrolled: document.body.scrollLeft;
On the body of the web page (the distance between the leftmost side of the web page and the left edge of the screen): window. screenTop;
Left of the text part of the webpage (the distance between the top of the text of the webpage and the upper edge of the screen): window.screenLeft.


Note: Sometimes the value cannot be obtained because of html The document type
is added to the file header:


, At this time, document.body.scrollTop and document.body.scrollLeft are changed to: document.documentElement.scrollTop and document.documentElement.scrollLeft is enough, document.body.clientWidth and document.body.clientHeight should also be changed to: document.documentElement.clientWidth and document.documentElement.clientHeight
Of course there are omissions or lack of explanation. Everyone can add, discuss or Baidu Baidu to make progress together! ye~