Under the newly defined standard, the document.documentedlement.clientheight can obtain the correct value in IE and Firefox. The following article introduces the difference between the size of the window size to obtain various browsers:
<script language = "javascript">
Function Getinfo ()
{{
var s = "";
S + = "Web pages are visible area width:" + document.body.clientWidth ;
S + = "Webpage visible area high:" + document.body.clientheight ;
S + = "Webpage visible area width:" + Document.body.OffsetWidth + "(including width of the edge and scroll bar)";
S + = "Webpage visible area high:" + Document.body.Offsetheight + "(including the width of the edge)";
S + = "Webpage Text Full text Width:" + Document.body.scrollwidth;
S + = "Webpage Text High Text High:" + DCUMENT.BODY.Scrollheight;
S + = "FF) that is rolled away from the webpage:" + Document.body.scrolltop;
S + = "IE):" + Document.documentelement.scrolltop;
S + = "Web pages are rolled up on the left:" + document.body.scrolLLEFT;
S + = "Webpage text part:" + window.screentop;
S + = "Webpage The text part left:" + Window.screenleft;
S + = "High screen resolution:" + window.screen.height;
S + = "Screen resolution width:" + window.screen.width;
S + = "Screen Available Working Area Height:" + Window.Screen.availheight;
S + = "Screen available working area width:" + window.screen.availwidth;
S += "Your screen settings are" +window.screen.colordepth +"bit color";
s += "Your screen settings" +window.screen.devicexdpi +"pixel/inch";
alert (s);
}
getinfo ();
</script>
In local tests:
You can use it under ie, firefox, opera
document.body.clientWidth
document.body.clitingheight
It can be obtained, very simple and convenient.
And in the company project:
Opera still use
document.body.clientWidth
document.body.clitingheight
But IE and FIREFOX are used
document.documentelement.clientWidth
document.documentelement.clientheight
<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">
If you add this line to the page
In IE:
document.body.clientWidth ==> Body object width
document.body.clitingheight ==> Body object height
document.documentelement.clientWidth ==> Visible area width
document.documentelement.clientHeight ==> Visible area height
In Firefox:
document.body.clientWidth ==> Body object width
document.body.clitingheight ==> 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.clitingheight ==> Visible area height
document.documentelement.clientWidth ==> page object width (ie, the width of the Body object plus Margin width)
document.documentelement.clientheight ==>> Page Object height (that is, the height of the Body object plus Margin high)
Suppose OBJ is a HTML control.
Obj.Offsettop refers to the position, integer, and unit pixel from the top or upper -layer control.
Obj.OffsetLeft refers to the position, integer, unit pixel from the left or upper controls.
Obj.OffsetWidth refers to the width, integer, unit pixel of the OBJ control itself.
Obj.offsetheight refers to the height, integer, unit pixel of OBJ control itself.
We explain the "upper or upper layers" and "left or upper layers" mentioned earlier.
For example:
<div ID = "Tool">
<input type = "Button" value = "Submit">
<input type = "Button" Value = "Reset">
</div>
The offsettop of the "Submit" button refers to the distance between the "Tool" layer on the "Tool" layer, because the closest to the upper frame of the "TOOL" layer closest to it.
The Offsettop of the "Reset" button refers to the distance between the "Tool" layer on the "Tool" layer, because the closest to the upper frame of the "Tool" layer closest to it.
The OffsetLeft of the "Submit" button refers to the distance between the "Tool" layer of the "Submit" button, because the left side of the "TOOL" layer closest to the left side of the "TOOL" layer is the left.
The OffsetLeft of the "Reset" button refers to the distance of the "Submit" button from the "Submit" button, because the right frame of the "Submit" button closest to it is the right side of the "Submit" button.
Offsettop can get the position of the HTML element from above or the outer element, and style.top is also possible. The difference between the two is:
1. Offsettop returns numbers, while style.top returns a string. In addition to numbers, there are units: PX.
2. Offsettop is read only, while style.top can be read and write.
Third, if you do not specify the TOP style for the HTML element, the style.top returns an empty string.
OffsetLeft and style.left, OffsetWidth, and style.width, Offsetheight and style.head are the same.
scrollheight: Get the scroll height of the object.
ScrollLeft: Set or get the distance between the left end of the currently visible content in the left boundary and window of the object
Scrolltop: Set or get the distance between the top of the object and the top of the window in the window
scrollWidth: Get the scroll width of the object
Offsetheight: The height of the parent coordinates specified by the OFFSETParent attribute by the obtaining object
OffsetLeft: For the calculation left position of the patriarchal coordinate of the patriarchal coordinate specified by the OFFSETParent attribute
Offsettop: The top position of the calculation of the patriarchal coordinate of the pattern specified by the OFFSETTOP attribute
Event.clientX's horizontal coordinates of relative documents
Event.clienty's vertical coordinates of relative documents
Event.Offsetx Horizontal coordinates of relative containers
Event.Offsety's vertical coordinates
document.documenetElement.scrolltop Valted Valley Rolling Valley
Event.clientX+Document.documentelement.scrolltop The horizontal seat label of the relative document+the amount of rolling vertical rolling
The above mainly refers to the difference between the Firefox in IE: 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
(Need to mention: the Margin attributes in CSS are not related to ClientWidth, OffsetWidth, Clientheight, OfficeTheight)