Precise HTML positioning: full explanation of scrollleft, scrollwidth, clientwidth, and offsetwidth

HTML: scrollleft, scrollwidth, clientwidth, and offsetwidth

Scrollheight: gets the scroll height of an object.

Scrollleft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window.

Scrolltop: sets or obtains the distance between the top of the object and the top of the visible content in the window.

Scrollwidth: gets the scroll width of an object.

Offsetheight: gets the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetparent attribute.

Offsetleft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetparent attribute.

Offsettop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsettop attribute.

The horizontal coordinates of event. clientx relative to the document

The vertical coordinates of event. clienty relative to the document

Horizontal coordinates of event. offsetx relative to the container

Event. offsety vertical coordinates of the container

Document.doc umentelement. scrolltop vertical scroll Value

Event.clientxw.document.doc umentelement. The horizontal coordinate of scrolltop relative to the document + The amount of vertical scrolling

The difference between Firefox and IE is as follows:

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

(The margin attribute in CSS is independent of clientwidth, offsetwidth, clientheight, and offsetheight)

 

 

Onmouseover: When the mouse passes, triggers = subsequent script functions.
Onmouseout when the mouse leaves ..
Onmouseup: When the mouse is pressed, It is lifted...
Onmousemove: move the mouse ..
Onmousedown when the mouse is pressed ..

 

Assume that obj is an HTML control.

OBJ. offsettop refers to the upper-side position of OBJ relative to the layout or the parent coordinate specified by the offsetparent attribute. It is an integer in pixels.

OBJ. offsetleft refers to the left-side position of OBJ relative to the layout or the parent coordinate specified by the offsetparent attribute. It is an integer in pixels.

OBJ. offsetwidth refers to the absolute width of the OBJ control. It does not include the undisplayed part due to overflow, that is, the actual width, integer, and unit pixel.

OBJ. offsetheight refers to the absolute height of the OBJ control, excluding the undisplayed parts due to overflow, that is, the actual height occupied by the OBJ control, which is an integer in pixels.

We will describe the offsetparent mentioned above.

Offsetparent gets the reference of the container Object Defining the offsettop and offsetleft attributes of the object. Offsettop and offsetparent are very complicated. Different browsers have different interpretations, and the floating interpretation is different. Therefore, we generally only need to understand the two to obtain the absolute position of the control in the browser.

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. different Body interpretations are not caused by different interpretations of offset)

 

 

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.

 

 

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.

Description
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, all the three values are the same value, indicating the contentActualHeight. Most new browsers support different interpreters based on the doctype specified on the page.

Scrolltop is the height of a volume. For example:

<Div style = "width: 100px; Height: 100px; Background-color: # ff0000; overflow: hidden;" id = "p">
<Div style = "width: 50px; Height: 300px; Background-color: # 0000ff;" id = "T"> If scrolltop is set for P, these contents may not be completely displayed. </Div>
</Div>
<SCRIPT type = "text/JavaScript">
VaR P = Document. getelementbyid ("p ");
P. scrolltop = 10;
</SCRIPT>

Because scrolltop is set for the outer element P, the inner element will roll to the upper part, which is scrolltop.

Scrollleft is similar.

We already know that offsetheight is the width of its own element, while scrollheight is the absolute width of the internal element, including the hidden part of the internal element. In the preceding example, the scrollheight of P is 300, and the offsetheight of P is 100.

Scrollwidth is similar.

IE and Firefox are fully supported, whereas 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 attributes basically show the pixel height and width of the element content. Theoretically, these measurements do not consider any joining through the style sheet.
Elements, such as margins and borders.

2. clientleft, clienttop:
The two return the thickness of the border around the element. If no border is specified or the element is not positioned, its value is 0.

3. scrollleft, scrolltop:
If the elements can be rolled, you can use these two attributes to obtain how far the elements have been rolled horizontally and vertically, in pixels.
For elements that cannot be rolled, these values are always 0.

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

5. style. left:
Offset between the positioning element and the left boundary of the rectangle containing it

6. style. pixelleft:
Return the integer pixel value of the left boundary offset of the positioning element. Because the non-pixel value of the attribute returns a string containing units, for example, 30px. This attribute can be used to separately process values in pixels.

7. style: posletf:
return the number of left boundary offsets of the positioning element, regardless of the unit specified by the corresponding style table element. because the non-Location Value of an attribute returns a string containing units, such as 1.2em
top, pixeltop, and postop.
left: it is the position from left to right, that is, the distance from the pendant to the left edge of the screen;
the distance between the offline setleft attribute value of the clientleft returned object and the actual value to the left of the current window
offsetleft returns the left value of the layout or coordinates of the object relative to the parent object, is to take the upper left corner of the parent object as the coordinate origin, the right and down are X and Y axis X coordinate
pixelleft settings or return the position of the object relative to the left of the window
scrollwidth is the actual content width of the object, the width of a non-wrapping edge varies with the content of the object (Content If this parameter is added, the actual width of the object may be changed ).
clientwidth is the visible width of the object. The clientwidth does not include the same edge line as the scroll bar. The clientwidth varies with the display size of the window.
offsetwidth is the visible width of the object. The value of the "offsetwidth" parameter changes 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
(you need to mention: the margin attribute in CSS has nothing to do with clientwidth, offsetwidth, clientheight, and offsetheight.)

Offsetwidth: the offset width of the element relative to the parent element. Equal to border + padding + width
Clientwidth: the visible width of the element. Equal to padding + width
Scrollwidth: Specifies the width of an element and includes the scrolling part.
Offsetleft: Location of the HTML element relative to its offsetparent Element
Scrollleft: returns and sets the coordinates of the current Horizontal Rolling task.

<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 + =
}
</SCRIPT>

Save As a webpage, run it, click the button, and move the scroll bar.
click Div, first, the position of B relative to a is displayed, and then the position of a relative window is displayed.