Detailed analysis of js mouse and object coordinate control attributes_javascript skills

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 parent coordinate offsetParent property.
IE and Opera consider 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 parent coordinate 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.
No one has any objection to clientHeight. They all think it is the height of the visible area of ​​​​the content. That is to say, the height of the area where the content can be seen in the page browser, usually from below the last toolbar to above the status bar. This area has nothing to do with page content.

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 property

scroll
Sets or gets whether scrolling is turned off.

scrollHeight
Get the scroll height of the object.

scrollLeft
Set or get the distance between the left edge of the object and the leftmost end of the currently visible content in the window.

scrollTop
Set or get the distance between the top of the object and the top of the visible content in the window.

scrollWidth
Get the scroll width of the object. The event attribute
x
sets or gets the x pixel coordinate of the mouse pointer position relative to the parent document.

screenX
Set or get 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
Set or get 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 interpretation of clientHeight, offsetHeight and scrollHeight of document.body by four browsers. We are talking about document.body here. If it is an HTML control, it is different.

The four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox).

clientHeight
No one has any 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, usually The area below the last toolbar and above the status bar has nothing to do with the page content.

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 the 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 page content heights, but when the web page 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 believe that offsetHeight is the visible area clientHeight scroll bar plus border. scrollHeight is the actual height of the web page content.

Similarly
The explanations of clientWidth, offsetWidth and scrollWidth are the same as above, just replace the height with the width.

But
FF has different interpretations of clientHeight in different DOCTYPEs, but it is not explained as above in xhtml 1 trasitional. Other browsers do not have this problem.

js gets page height

Copy code The code is as follows:

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills