Javascript offset, client, and scroll are frequently used. Next we will introduce them one by one. For more information, see.
OffsetTop refers to the position of the element above or upper-layer control, which is an integer in pixels.
OffsetLeft refers to the position of the element between the left side and the upper-layer control. It is an integer in pixels.
OffsetWidth refers to the width, integer, and unit pixel of the element control.
OffsetHeight refers to the height, integer, and unit pixel of the element control.
Visible area width of the webpage: document. body. clientWidth
Visible area height: document. body. clientHeight
Visible area width of the webpage: document. body. offsetWidth (including the width of the edge)
Visible area height of the webpage: document. body. offsetHeight (including the width of the edge)
Webpage text width: document. body. scrollWidth
Webpage text height: document. body. scrollHeight
The height of the page to be rolled: document. body. scrollTop
Left: document. body. scrollLeft
Page body: window. screenTop
Page body part left: window. screenLeft
Screen Resolution height: window. screen. height
Screen Resolution width: window. screen. width
Available screen workspace Height: window. screen. availHeight
Available workspace width: window. screen. availWidth
Here are the explanations of the four browsers on clientHeight, offsetHeight, and scrollHeight of document. body.
These four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox ).
ClientHeight
The four browsers have no objection to the clientHeight interpretation. They all regard the height of the visible area of the content, that is, the height of the area where the content can be viewed in the browser of the page, generally, the area below the last toolbar to above the status bar is irrelevant to the page content.
OffsetHeight
IE and Opera think offsetHeight = clientHeight + scroll bar + border.
NS and FF hold that offsetHeight is the actual height of the webpage content, which can be smaller than clientHeight.
ScrollHeight
IE and Opera hold that scrollHeight is the actual height of the webpage content, which can be smaller than clientHeight.
NS and FF think that scrollHeight is the content height of a webpage, but the minimum value is clientHeight.
Introduction:
1. offsetLeft
Assume that obj is an HTML control.
Obj. offsetTop refers to the position of the obj control above or upper layer. It is an integer in pixels.
Obj. offsetLeft refers to the position of the obj control on the left or upper layer. It is an integer in pixels.
Obj. offsetWidth refers to the width, integer, and unit pixel of the obj control.
Obj. offsetHeight refers to the height, integer, and unit pixel of the obj control.
We will describe the "top or upper layer" and "Left or upper layer" controls mentioned above.
For example:
The "Submit" button's offsetTop refers to the distance between the "Submit" button and the border on the "tool" layer, because the top border of the "tool" layer is closest to it.
The offsetTop of the "reset" button refers to the distance between the "reset" button and the border on the "tool" layer, because the top border of the "tool" layer is closest to it.
The "Submit" button's offsetLeft refers to the distance between the "Submit" button and the left border of the "tool" layer, because the left border closest to the left is the "tool" layer.
The "reset" button's offsetLeft refers to the distance between the "reset" button and the right border of the "Submit" button, because the right border closest to the left is the "Submit" button.
The preceding attributes are also valid in FireFox.
In addition, what we refer to here refers to the attribute value of the HTML control, not document. body, document. body values have different interpretations in different browsers (in fact, most environments are due to document. the reason why the body interpretation is different is not because the offset interpretation is different). Click here to view the differences.
Title: differences between offsetTop and style. top
Prerequisites: offsetTop, offsetLeft, offsetWidth, and offsetHeight
We know that offsetTop can obtain the position of the HTML element above or outside the element, and style. top is also acceptable. The difference between the two is:
1. offsetTop returns numbers, while style. top returns strings. In addition to numbers, it also has the unit: px.
Ii. offsetTop read-only, while style. top can be read and written.
3. If the top style is not specified for the HTML element, style. top returns an empty string.
OffsetLeft, style. left, offsetWidth, style. width, offsetHeight, and style. height are the same principles.
Title: clientHeight, offsetHeight, and scrollHeight
Here we will talk about four types of browsers for document. the clientHeight, offsetHeight, and scrollHeight of the body. Here we are talking about document. body. If it is an HTML control, it is different. Click here to view details.
These four browsers are IE (Internet Explorer), NS (Netscape), Opera, and FF (FireFox ).
2. clientHeight
ClientHeight
Everyone has no objection to clientHeight and thinks it is the height of the visible area of the content, that is, the height of the area where the content can be viewed in the browser of the page, generally, the area below the last toolbar to above the status bar is irrelevant to the page content.
OffsetHeight
IE and Opera think offsetHeight = clientHeight + scroll bar + border.
NS and FF hold that offsetHeight is the actual height of the webpage content, which can be smaller than clientHeight.
ScrollHeight
IE and Opera hold that scrollHeight is the actual height of the webpage content, which can be smaller than clientHeight.
NS and FF think that scrollHeight is the height of the webpage 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 hold that both offsetHeight and scrollHeight are the content height of the webpage. However, when the content height of the webpage is less than or equal to clientHeight, the value of scrollHeight is clientHeight, while the value of offsetHeight can be less than clientHeight.
IE and Opera hold that offsetHeight is the clientHeight scroll bar and border in the visible area. ScrollHeight indicates the actual height of the webpage content.
Likewise
The description of clientWidth, offsetWidth, and scrollWidth is the same as above. You only need to change the height to the width.
However
FF has different interpretations of clientHeight in different DOCTYPE, but not in xhtml 1 trasitional. This problem does not exist in other browsers.
Title: scrollTop, scrollLeft, scrollWidth, scrollHeight
3. scrollLeft
ScrollTop is the height of a volume. For example:
If scrollTop is set for p, the content may not be fully displayed.
