Assume that obj is an HTML control
obj.offsetTop refers to the calculated upper position of obj relative to the layout or the parent coordinate specified by the offsetParent attribute, integer, unit pixel.
obj.offsetLeft refers to the calculated left position of obj relative to the layout or the parent coordinate specified by the offsetParent attribute, integer, unit pixel.
obj.offsetWidth refers to the absolute width of the obj control itself, excluding the part not displayed due to overflow, that is, the width it actually occupies, integer, unit pixel.
obj.offsetHeight refers to the absolute height of the obj control itself, excluding the part not displayed due to overflow, that is, the height it actually occupies, integer, unit pixel.
Let's explain the offsetParent mentioned earlier.
offsetParent Gets a reference to the container object that defines the offsetTop and offsetLeft properties of the object. offsetTop and offsetParent are very complicated, different browsers have different interpretations, and the interpretations are different when floating, so we generally only need to understand that the absolute position of the control in the browser can be obtained through the two.
The above properties are also valid in FireFox.
In addition: what we are talking about here refers to the attribute value of the HTML control, not document.body. The value of document.body has different interpretations in different browsers (in fact, most environments are caused by different interpretations of document.body , not due to different interpretations of offset)
We know that offsetTop can get the position of the HTML element from the top or outer element, and style.top can also be used. The difference between the two is:
1. offsetTop returns a number, while style.top returns a string. In addition to the number, it also has the unit: px.
2. offsetTop is read-only, while style.top is read-writeable.
3. If the top style is not specified for the HTML element, style.top returns an empty string.
The same is true for offsetLeft and style.left, offsetWidth and style.width, offsetHeight and style.height.
clientHeight
Everyone has no 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. 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 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.
illustrate
The above is based on DTD HTML 4.01 Transitional. If it is DTD XHTML 1.0 Transitional, the meaning will be different. In XHTML, these three values are all the same value, indicating the actual height of the content. Most new versions of browsers support enabling different interpreters based on the DOCTYPE specified on the page.
scrollTop is the "rolled" height value, example:
Copy the code code as follows:
<div id="p">
<div id="t">If scrollTop is set for p, these contents may not be fully displayed. </div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
Since scrollTop is set for the outer element p, the inner element will scroll upward, and the rolled up part is scrollTop.
scrollLeft is similar.
We already know that offsetHeight is the width of its own element, and scrollHeight is the absolute width of the inner element, including the hidden part of the inner element. In the above, the scrollHeight of p is 300, and the offsetHeight of p is 100.
scrollWidth is similar.
IE and FireFox fully support it, while Netscape 8 and Opera 7.6 do not support scrollTop and scrollLeft (except document.body.scrollTop and document.body.scrollLeft).
1.clientHeight, clientWidth:
These two properties roughly show the pixel height and width of the element's content. Theoretically these measurements do not take into account any added through the style sheet.
Margins, borders, etc. in elements.
2.clientLeft,clientTop:
These two return the thickness of the border around the element. If you do not specify a border or do not position the element, its value is 0.
3.scrollLeft,scrollTop:
If the element is scrollable, you can use these two properties to get how far the element has scrolled in the horizontal and vertical directions. The unit is pixels.
For elements that are not scrollable, these values are always 0.
4. scrollHeight,scrollWidth:
No matter how many objects are visible on the page, they get the whole.
5.style.left:
The offset of the positioned element from the left edge of the containing rectangle
6.style.pixelLeft:
Returns the integer pixel value of the left border offset of the positioned element. Because the non-pixel value of the attribute returns a string containing the unit, for example, 30px. Use this attribute to handle values in pixels separately.
7.style:posLetf:
Returns the numerical value of the left border offset of the positioned element, regardless of the units specified by the corresponding style sheet element. Because the non-position value of the attribute returns a string containing the unit, for example, 1.2em
Just a few analogies like top, pixelTop, posTop will suffice.
LEFT: is the position moved from left to right, that is, the distance between the pendant and the left edge of the screen;
clientLeft returns the distance between the offsetLeft property value of the object and the real value to the left side of the current window.
offsetLeft returns the left value of the object relative to the layout or coordinates of the parent object. It takes the upper left corner of the parent object as the origin of the coordinates, and the right and downwards are the x coordinates in the positive direction of the X and Y axes.
pixelLeft sets or returns the position of the object relative to the left side of the window
scrollWidth is the width of the actual content of the object, excluding the edge width, and will change with the amount of content in the object (too much content may change the actual width of the object).
clientWidth is the visible width of the object, excluding scroll bars and other edges, and will change with the display size of the window.
offsetWidth is the visible width of the object, including scroll bars and other edges, and will change with the display size of the window.
IE6.0, FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height-border
offsetWidth = width
offsetHeight = height
(It needs to be mentioned: the margin attribute in CSS has nothing to do with clientWidth, offsetWidth, clientHeight, and offsetHeight)
offsetwidth: is the offset width of the element relative to the parent element. Equal to border+padding+width
clientwidth: is the visible width of the element. Equal to padding+width
scrollwidth: is the width of the element including the scrolling part.
offsetLeft: The position of the Html element relative to its own offsetParent element
scrollLeft: Returns and sets the coordinate value of the current horizontal scroll task
Copy the code code as follows:
<input type="button" value="Click" onclick="move()">
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<script language="javascript">
function move()
{
var d=document.getElementById("d")
a=eval(20)
d.scrollLeft+=a
}
</script>
Save as a web page, run it, click the button, and the scroll bar moves
Click on the div, first pop up the position of b relative to a, and then pop up the position of a relative to the window.