JS HTML tag size distance location calculation

Differences in interpretations of ClientHeight, offsetheight, ScrollHeight, ClientWidth, offsetwidth, and scrollwidth in four different browsers

Web page Visible area width: document.body.clientWidth
Web page Visible Area height: document.body.clientHeight
Web page Visible Area width: document.body.offsetWidth (including edge width)
Web page Visible Area High: document.body.offsetHeight (including edge width)
Page body Full text width: document.body.scrollWidth
Page body Full text High: Document.body.scrollHeight
Page is rolled away High: document.body.scrollTop
Webpage is rolled away left: document.body.scrollLeft
Page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of screen resolution: Window.screen.width
Screen available work area height: window.screen.availHeight
Screen available work area width: window.screen.availWidth

Here are the explanations of the document.body clientheight, offsetheight and ScrollHeight of the four browsers.

These four browsers are IE (Internet Explorer), NS (Netscape), Opera, FF (FireFox), respectively.

ClientHeight
The four browsers have no objection to the interpretation of ClientHeight, which is considered to be the height of the viewable area of the content, that is to say, the height of the area of the content is visible in the page browser, usually the last toolbar below the status bar above the area, regardless of the content of the page.

Offsetheight
IE, Opera thinks 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 the Web content, can be less than clientheight.
NS, FF thinks that 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, but 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 thinks offsetheight is the 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 change the height to width.


Note: The above is also a turn, a little reference to their own, some values to be based on the way the page depends! The Ajax I'm using is completely out of the way!

JavaScript Window Properties:
Web page Visible area width: document.body.clientWidth
Web page Visible Area height: document.body.clientHeight
Web page Visible Area width: document.body.offsetWidth (including edge width)
Web page Visible Area High: document.body.offsetHeight (including edge width)
Page body Full text width: document.body.scrollWidth
Page body Full text High: Document.body.scrollHeight
Page is rolled away High: document.body.scrollTop
Webpage is rolled away left: document.body.scrollLeft
Page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of screen resolution: Window.screen.width
Screen available work area height: window.screen.availHeight
Screen available work area width: window.screen.availWidth


Can be used under IE, FireFox, opera
Document.body.clientWidth
Document.body.clientHeight
Can be obtained, very simple, very convenient.
And in the company project:
Opera still uses
Document.body.clientWidth
Document.body.clientHeight
But IE and Firefox use
Document.documentElement.clientWidth
Document.documentElement.clientHeight
It's the standard of the "the".
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

If you add this line of markup to the page

In IE:
Document.body.clientWidth ==> Body Object width
Document.body.clientHeight ==> Body Object Height
Document.documentElement.clientWidth ==> Visible Area width
Document.documentElement.clientHeight ==> Visible Area height
Note: In IE, the "visible area" is basically not recognized body, but must use documentelement!!!!

In Firefox:
Document.body.clientWidth ==> Body Object width
Document.body.clientHeight ==> Body Object Height
Document.documentElement.clientWidth ==> Visible Area width
Document.documentElement.clientHeight ==> Visible Area height

In Opera:
Document.body.clientWidth ==> Visible Area width
Document.body.clientHeight ==> Visible Area height
Document.documentElement.clientWidth ==> The width of the page object (that is, the body object width plus the margin width)
Document.documentElement.clientHeight ==> Page Object height (i.e. body object height plus margin height)

Get window aspect:
var w= document.documentElement.offsetWidth;
var h=document.documentelement.offsetheight;


-------------------------------------------------------------------------------------------------

Assume that 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 left position, integer, Unit pixel, of the calculated obj relative to the layout or the parent coordinate specified by the OffsetParent property.

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

Obj.offsetheight refers to the absolute height of the obj control itself, excluding parts that are not displayed because of overflow, that is, the height that it actually occupies, the integer type, and the 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 as long as the understanding through the two can get control in the absolute position in the browser.

The above properties are also available in FireFox.

Also: What we're talking about here is the property value of the HTML control, not the value of the 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 from above or outside the element, and Style.top is also possible, the difference is:

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

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

If 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, are considered to be the height of the content viewable area, that is, the page browser can see the content of the height of the area, is generally the last toolbar below the status bar above the area, not related to the content of the page.

Offsetheight
IE, Opera thinks 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 the Web content, can be less than clientheight.
NS, FF thinks that 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, but 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 thinks offsetheight is the 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 change the height to width.

Description
The above is based on the DTD HTML 4.01 Transitional, if 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 new versions of browsers support different interpreters based on the DOCTYPE specified on the page

ScrollTop is the "volume" Height value, example:

Because 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 truth.

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

ScrollWidth is a similar truth.

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's content. Theoretically, these measurements are not considered for any addition of the style sheet
The page margins, borders, and so on in the element.

2.clientleft,clienttop:
These two return the thickness of the border around the element, and if you do not specify a border or do not position the element, his value is 0.

3.scrollleft,scrolltop:
If the elements can be scrolled, 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 whole.

5.style.left:
Offset of the left edge of the rectangle containing the anchor element

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 containing 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 containing the unit, for example, 1.2EM

Top,pixeltop,postop a few analogies on the line.
Left: The distance between the left and right 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 window
Offsetleft returns the left value of the layout or coordinates of the object relative to the parent object, which is the x-coordinate of the X-, y-axis positive direction of the parent object, the upper-right corner of the parents as the coordinate origin.
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, without the width of the edge, which changes depending on how much content is in the object (the actual width of the object may be changed by more content).
ClientWidth is the width of the object visible, without edges such as the scroll bar, which changes with the window's display size.
The offsetwidth is the visible width of the object, and the edges such as the package scroll bar change with the window'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: the Margin property in CSS, and clientwidth, Offsetwidth, clientheight, offsetheight are irrelevant)

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 includes 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

onclick= "alert (' offsetleft: ' +this.offsetleft)" >

Save as Web page, run, click button, scroll bar to move
Click the div to pop the position of b relative to a, then the position of a relative to the window.

Assume that 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 left position, integer, Unit pixel, of the calculated obj relative to the layout or the parent coordinate specified by the OffsetParent property.

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

Obj.offsetheight refers to the absolute height of the obj control itself, excluding parts that are not displayed because of overflow, that is, the height that it actually occupies, the integer type, and the 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 as long as the understanding through the two can get control in the absolute position in the browser.

The above properties are also available in FireFox.

Also: What we're talking about here is the property value of the HTML control, not the value of the 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 from above or outside the element, and Style.top is also possible, the difference is:

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

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

If 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, are considered to be the height of the content viewable area, that is, the page browser can see the content of the height of the area, is generally the last toolbar below the status bar above the area, not related to the content of the page.

Offsetheight
IE, Opera thinks 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 the Web content, can be less than clientheight.
NS, FF thinks that 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, but 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 thinks offsetheight is the 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 change the height to width.

Description
The above is based on the DTD HTML 4.01 Transitional, if 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 new versions of browsers support different interpreters based on the DOCTYPE specified on the page

ScrollTop is the "volume" Height value, example:

<div style= "Width:100px;height:100px;overflow:hidden;" id= "P" >
<div style= "width:50px;height:300px;" id= "T" > If 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 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 truth.

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

ScrollWidth is a similar truth.

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's content. Theoretically, these measurements are not considered for any addition of the style sheet
The page margins, borders, and so on in the element.

2.clientleft,clienttop:
These two return the thickness of the border around the element, and if you do not specify a border or do not position the element, his value is 0.

3.scrollleft,scrolltop:
If the elements can be scrolled, 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 whole.

5.style.left:
Offset of the left edge of the rectangle containing the anchor element

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 containing 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 containing the unit, for example, 1.2EM

Top,pixeltop,postop a few analogies on the line.
Left: The distance between the left and right 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 window
Offsetleft returns the left value of the layout or coordinates of the object relative to the parent object, which is the x-coordinate of the X-, y-axis positive direction of the parent object, the upper-right corner of the parents as the coordinate origin.
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, without the width of the edge, which changes depending on how much content is in the object (the actual width of the object may be changed by more content).
ClientWidth is the width of the object visible, without edges such as the scroll bar, which changes with the window's display size.
The offsetwidth is the visible width of the object, and the edges such as the package scroll bar change with the window'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: the Margin property in CSS, and clientwidth, Offsetwidth, clientheight, offsetheight are irrelevant)

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 includes 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= "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, run, click button, scroll bar to move
Click the div to pop the position of b relative to a, then the position of a relative to the window.

Note: The content is transferred from the network.

JS HTML tag size distance location calculation