Reprinted: https://blog.csdn.net/zh_rey/article/details/78967174
1, offsetLeft (distance to the position of a control)
Assume that obj is an HTML control.
obj.offsetTop obj refers to the location or distance above the upper control, integer pixels.
obj.offsetLeft means obj distance left or upper position control, integer pixels.
obj.offsetWidth means obj width control itself, integer pixels.
obj.offsetHeight obj control itself refers to the height of integer pixels.
We make a description of the aforementioned "above or upper" and "left or upper" control.
E.g:
<div id="tool">
<input type="button" value="提交">
<input type="button" value="重置">
</div>
"Submit" button offsetTop means "submit" button from the upper layer borders "tool" of distance, because from its top most recently on the border "tool" layer.
"Reset" button offsetTop means "Reset" button from the upper layer borders "Tool" distance from its upper edge as is the nearest border "Tool" layer.
"Submit" button offsetLeft means "submit" button from the "tool" layer from the left border, because it left from the latest of which was left border "tool" layer.
"Reset" button offsetLeft refers to "reset" button from the "Submit" button to the right from the box, because it left from the latest of which was the "Submit" button to the right of the box.
The above properties are also effective in FireFox.
Also: we are talking about here refers to the property value HTML controls, not document.body, value document.body have different interpretations in different browsers (in fact most of the environment is due to explain the different causes of document.body not because of the offset caused by different interpretation).
Title: the difference between the offsetTop and style.top
We know offsetTop can get the HTML element from a position above or outer elements, style.top also possible, the difference between the two is:
A, it returns the offsetTop number, and returns a string style.top, except figures with further units: px.
Two, the offsetTop read-only, read-write and style.top.
Third, if there is no element to specify HTML style over top, then style.top returns an empty string.
offsetLeft and style.left, offsetWidth and style.width, offsetHeight and style.height is the same reason.
2, (visual content height (comprising: padding does not contain: border, margins, a scroll bar), the actual height = height setting - the scroll bar.) ClientHeight
We do not have any objection to clientHeight, are considered to be highly visual area, that page a browser can see the content of this height , generally last a toolbar to the area above the status bar, regardless of the page content.
3, offsetHeight (the entire height of the element (comprising: padding, borders).)
IE, Opera considered offsetHeight = clientHeight + scroll bar + border.
NS, FF think offsetHeight web content is the actual height, may be less than clientHeight.
4, scrollHeight (height specified element content)
IE, Opera web content is considered scrollHeight actual height, may be less than clientHeight.
NS, FF scrollHeight is considered the height of web content, but the minimum is clientHeight.
5、scrollLeft
scrollTop the "roll" up the value of height, examples:
<div style="width:100px;height:100px;overflow:hidden;" id="p">
<Div style = "width: 50px; height: 300px;" id = "t"> scrollTop If set to p, the content may not be completely displayed. </ Div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
Since the outer element is provided scrollTop to p, so that the inner element will scroll up.
scrollLeft also similar reason.
We already know offsetHeight is the width of the element itself.
The scrollHeight is the absolute width of the internal element, the hidden section contains internal elements.
The above scrollHeight p 300, and p is the offsetHeight 100.
scrollWidth also similar reason.
Full support for FireFox and IE, but Netscape and Opera do not support scrollTop, scrollLeft (except document.body).
6、clientLeft
The distance between the object offsetLeft return to the current property value and the true value of the left of the window, the frame length will be appreciated
I have been very confused on offsetLeft, offsetTop, scrollLeft, scrollTop these methods, spent the day learning a bit of good. We obtained the following results:
in conclusion:
1.offsetTop:
Current object to its top higher layer distance .
It can not be assigned. Setting object to the distance from the top of the page, please use style.top property.
2.offsetLeft :
Current object to the left from its higher layer.
It can not be assigned. Setting the distance to the object left part of the page, please use style.left property.
3.offsetWidth :
The current width of the object.
In that the difference between style.width attributes: setting target values such as the width of the percentage of the width, regardless of the page becomes larger or smaller, style.width return this percentage, the width value offsetWidth objects in different pages and returns not a percentage value
4.offsetHeight :
In that the difference between style.height attributes: setting target value as a percentage of the width of the height, regardless of the page becomes larger or smaller, this percentage style.height return, and height values offsetHeight objects in different pages and returns not a percentage value
5.offsetParent :
The current higher layer objects objects.
Note. If the object is included in a DIV, then this will not be taken as DIV higher layer of the object, (i.e., higher layer of the object the object will skip DIV) is a higher layer presents no problem when the Table.
With this property, you can get the current absolute position of the object in different sizes page.
Get the absolute position of the script code
6.scrollLeft :
Leftmost object distance to an object in the range of the currently displayed window on the left.
That is the case in the event of horizontal scroll bar, scroll bar pulled away.
7.scrollTop
From the top edge of the top-most object to the object in the range of the currently displayed window.
That is the case in the event of a vertical scroll bar, scroll bar pulled away.
We are here to talk about the four kinds of explanation browser document.body of clientHeight, offsetHeight and scrollHeight, where document.body say is, if it is HTML controls, then there are different.
These four browsers are IE (Internet Explorer), NS (Netscape), Opera, FF (FireFox).
clientHeight
We do not have any objection to clientHeight, it is considered to be highly visual area, meaning the browser page can be seen in the height of the content area, usually last a toolbar to the area above the status bar, regardless of the page content (even if the content is only one line).
offsetHeight
IE, Opera considered offsetHeight = clientHeight + scroll bar + border.
NS, FF think offsetHeight web content is the actual height, may be less than clientHeight.
scrollHeight
IE, Opera web content is considered scrollHeight actual height, may be less than clientHeight.
NS, FF scrollHeight is considered the height of web content, but the minimum is clientHeight.
general speaking
clientHeight is to look at the height of the content area of the browser.
NS, FF think offsetHeight and scrollHeight are highly web content, web content only when the height of less than or equal clientHeight, scrollHeight value is clientHeight, and offsetHeight may be less than clientHeight.
IE, Opera considered offsetHeight is viewable area clientHeight scroll bar plus borders. scrollHeight web content is the actual height.
Similarly
Explained clientWidth, offsetWidth and scrollWidth same as above, except that the height can be replaced by a width.