HTML precise positioning: Scrollleft,scrollwidth,clientwidth,offsetwidth's completely specific explanation

What exactly is the distance that html:scrollleft,scrollwidth,clientwidth,offsetwidth refers to?



ScrollHeight: Gets the scroll height of the object.

ScrollLeft: Sets or gets the distance between the left edge of the object and the leftmost of the currently visible content in the form

ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content on the form

ScrollWidth: Gets the scrolling width of the object

Offsetheight: Gets the height of the object relative to the layout or parent coordinates 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 property

OffsetTop: Gets the computed top position of the object relative to the layout or the parent coordinate specified by the OffsetTop property

Event.clientx horizontal coordinates of relative documents

Event.clienty vertical coordinates of relative documents



Event.offsetx horizontal coordinates relative to the container

Event.offsety the vertical coordinate of the relative container

Document.documentElement.scrollTop The vertical scrolling value

Event.clientx+document.documentelement.scrolltop horizontal coordinates of relative documents + amount of vertical scrolling



The above mainly refers to IE, Firefox differences such as the following:

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

(Need to mention: the Margin property in CSS, and clientwidth, Offsetwidth, clientheight, offsetheight are irrelevant)

onmouseover when the mouse passes, trigger = the script function behind
onmouseout when the mouse leaves.
OnMouseUP when the mouse is pressed and lifted ...
OnMouseMove when the mouse moves.
OnMouseDown when the mouse is pressed ...

If obj is an HTML control.

Obj.offsettop refers to the calculation of the upper-side position of obj relative to the layout or the parent coordinate specified by the OffsetParent property, Integer, per pixel.

Obj.offsetleft refers to the calculation of the left position of obj relative to the layout or the parent coordinate specified by the OffsetParent property, Integer, per pixel.

Obj.offsetwidth refers to the absolute width of the obj control itself, and does not contain parts that are not displayed because of overflow, that is, the actual width of the occupied, integer, unit pixels.

Obj.offsetheight refers to the absolute height of the obj control itself, and does not contain parts that are not displayed because of overflow, that is, the height of the de facto occupation, the integer type, unit pixels.

Let's make a note of 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 complex, different browsers have different interpretations, floating the explanation is different, so we generally just understand that through the two can get control in the absolute position of the browser can be.

The above properties are also available in FireFox.

Also: What we're talking about here is the value of the HTML control's property, not the value of document.body,document.body is interpreted differently in different browsers (in fact most environments are caused by different interpretations of document.body, not because Offset interpretation of different causes)

We know that OffsetTop can get the position of the HTML element above or outside the element, Style.top is also able, the difference is:

First, OFFSETTOP returns a number, and Style.top returns a string, in addition to the number of units: px.

Second, OffsetTop only read, and Style.top can read and write.

Assuming that the top style is not specified for the HTML element, Style.top returns an empty string.

Offsetleft and Style.left, offsetwidth and Style.width, offsetheight and Style.height are the same.

ClientHeight
Everyone has no objection to the clientheight, all feel is the height of the content visible area, that is, the page browser can see the content of this area of the height, usually the last toolbar below the status bar above the area, not related to the content of the page.

Offsetheight
IE, Opera feel offsetheight = clientheight + scroll bar + border.
NS, FF think offsetheight is the actual height of the Web content, can be less than clientheight.

ScrollHeight
IE, Opera think ScrollHeight is the actual height of Web content, can be less than clientheight.
NS, FF think ScrollHeight is the height of the Web content, but the minimum value is clientheight.

To put it simply
ClientHeight is the height of the area through which the content is viewed by the browser.
NS, FF think Offsetheight and scrollheight are Web content height, only when the content height of the page is less than or equal to ClientHeight, scrollheight value is clientheight, and Offsetheight can be less than clientheight.
IE, Opera think offsetheight is visible area clientheight scroll bar and border. ScrollHeight is the actual height of the Web content.

Similarly
The explanations of clientwidth, offsetwidth and ScrollWidth are the same as above, just to change the height to the width.

Description
The above is based on the DTD HTML 4.01 transitional, assuming that the DTD XHTML 1.0 transitional The meaning will be different, in XHTML, these three values are the same value, both represent the actual height of the content. Most browsers for the new version number support different interpreters based on the DOCTYPE specified on the page

ScrollTop is a "roll up" height value, demonstrating the sample:

<div style= "Width:100px;height:100px;background-color: #FF0000; overflow:hidden;" id= "P" >
<div style= "Width:50px;height:300px;background-color: #0000FF;" id= "T" > assuming that scrolltop is set for p, the content may not be fully displayed. </div>
</div>
<script type= "Text/javascript" >
var p = document.getElementById ("P");
P.scrolltop = 10;
</script>

Because the scrolltop is set for the outer element p, the inner element is rolled up, and the part that is ScrollTop is the volume.

ScrollLeft is a similar principle.

We already know that offsetheight is the width of its own element, while ScrollHeight is the absolute width of the inner element, including the hidden part of the inner element. The scrollheight of p above is 300, while P's offsetheight is 100.

ScrollWidth is a similar principle.

IE and FireFox are fully supported, while Netscape 8 and Opera 7.6 Do not support scrolltop, scrollleft (except Document.body.scrollTop, Document.body.scrollLeft).

1.clientHeight, ClientWidth:
These two properties generally show the pixel height and width of the element content. Theoretically, these measurements do not take into account whatever is added through the stylesheet
The page margins, borders, and so on in the element.

2.clientleft,clienttop:
These two return the thickness of the border around the element, assuming that a border is not specified or the element is not positioned, his value is 0.

3.scrollleft,scrolltop:
Assuming that the element is capable of scrolling, you can get how far the elements are scrolled in both horizontal and vertical directions, in pixels, by these two properties.
For elements that cannot be scrolled, these values are always 0.

4.scrollheight,scrollwidth:
No matter how many objects are visible on the page, they get the overall.

5.style.left:
Offset of the left edge of the rectangle that contains the anchor element and its

6.style.pixelleft:
Returns the integer pixel value of the left boundary offset of the anchored element. Because the non-pixel value of the property returns a string that includes the unit, for example, 30px. This property allows you to handle numeric values in pixels individually.

7.STYLE:POSLETF:
Returns the value of the number of the left boundary offset of the anchored element, regardless of the unit specified by the corresponding style sheet element. Because the non-positional value of the property returns a string that includes the unit, such as,1.2em  
    
Top,pixeltop,postop a few analogies.
left:   is the left-to-right position, which is the distance from the left edge of the screen;
clientleft   returns the distance between the Offsetleft property value of the object and the true value to the left of the current form
offsetleft   returns the leftmost value of the object's layout or coordinates relative to the parent object , that is, the upper-left corner of the parent object is the coordinate origin, the x-coordinate right and down for the X, y-axis positive direction
pixelleft   Sets or returns the object's position relative to the left side of the form
ScrollWidth is the width of the object's actual content, not the width of the edge, varies depending on how much content is in the object (the actual width of the object may change if there is more content). The
ClientWidth is the width of the object visible, and the edges, such as the scroll bar, change with the form's display size. The
 offsetwidth is the visible width of the object, and edges such as the package scroll bar change with the form's display size.
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
(need to mention: Margin property in CSS, with clientwidth, offsetwidth, ClientHeight, offsetheight are not relevant)

Offsetwidth: Is the offset width of the element relative to the parent element. equals Border+padding+width
ClientWidth: Is the visible width of the element. equals Padding+width
ScrollWidth: Is the width of the element and contains the scrolling part.
The position of the offsetleft:html element relative to its own offsetparent element
ScrollLeft: Returns and sets the coordinate value of the current horizontal scrolling service

<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 Web page, execute, click button, scroll bar move
Click div to pop the position of b relative to a, and then pop a relative to the form

HTML precise positioning: Scrollleft,scrollwidth,clientwidth,offsetwidth's completely specific explanation