Actual measurement: scrollLeft, scrollWidth, clientWidth, offsetWidth, and screen. width resolution (post)

General sections of IE and FF:
For more information about the differences between document.doc umentElement and document. body, see references. When uploading, you can refer to document.doc umentElement as the visible window area of the browser, while the body is only the content area.

1. window. screen. width (. height)Display size (General for IE and FF): 1440*900 --> it has nothing to do with whether the browser is full screen

2most document.doc umentElement. clientHeight/clientWidth:Browser visible window size (General for IE and FF): this value is not restricted by the style sheet and will only change with the browser window size. This is different from document. body. clientWidth.
3. document. body. clientHeight:Document height (General for IE and FF ):Just like above, the value object is changed to BODY.When there is no content in the BODY, the value of IE is 18, and the value of FF is 0. when there is content, the IE value = FF, which is related to the content in the BODY, is the sum of the height of all elements
4. document. body. clientWidth:Document width (General for IE and FF, FF is about 2PX more than IE gets): for example, IE 1440, FF: 1442. This value is irrelevant to the content in the BODY, but it is related to the style, for example, if the style defines body {width: 98px}, this value is 98. When the browser size changes, this value also changes if it is not full screen.

32.16document.doc umentElement. scrollLeft/scrollTop:Left/top position after Page scrolling (General for IE and FF ).
4、document.doc umentElement.ScrollHeight/ScrollWidth:Get the scroll height/width of the object (General for IE and FF, but different for IE/FF) The difference is that when the total height of the body is smaller than the visible area height of the browser window, the scrollHeight value of IE is the actual height of the body, and FF is the height of the visible area of the browser. If the body height is greater than the visible area of the browser, there is no difference between the two.

52.16document.doc umentElement.OffsetHeight/OffsetWidth:Obtains the width/height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute. (similar to the above functions and general use of IE/FF, but the difference is exactly the opposite) offsetHeight refers to the height of the visible area of the browser, while offsetWidth refers to the browser width, the difference is that when the total height of the body is lower than the height of the visible area of the browser window, the offsetHeight value of IE is still the height of the visible area of the browser, and FF is the actual height of the body. If the body height is greater than the visible area of the browser, there is no difference between the two.
Note: document. body. offsetHeight and document. body. offsetWidth:This is different from the above, the object is body,The values in FF/IE are the height and width of the body. It is not affected by the visible area of the browser.
In addition, when CSS limits the width of the BODY, if the width of a div on the page exceeds this value, then the document of IE. body. clientWidth and offsetWidth are equal to the width of the DIV, but FF retains the value defined for the body width in CSS.

Note that if the body {margin: 0px; width: 1239px} is not defined in CSS, the value of a div exceeds the screen size, for example, 1600px; in IE, document. body. offsetWidth/clientwidthor document.doc umentElement can be used to obtain the actual width of the body to the DIV. FF indicates that the body value is the size of the visible area of the browser no matter what it is used, it is not calculated based on the div width.
In this case, document.doc umentElement. scrollWidth (body is not allowed) is used as the Width Measurement of the text. The page view width is measured using document.doc umentElement. clientWidth. As follows:

Function BrowserAndIEwidth (){
Var str2 =''

BodyWidth = document.doc umentElement. scrollWidth // document. body cannot be used here.
BrowserWidth = document.doc umentElement. clientWidth

Str1 = 'actual BODY width = '+ bodyWidth +', browser visible width = '+ BrowserWidth

If (bodyWidth> BrowserWidth ){
Str2 = 'body exceeds the browser width! '
}

Alert (str1 + '\ n' + str2 );
}
// This function is used in IE when the body content is not out of rangeOverflow = "auto"After setting, the value is not allowed.

Or the separate values are better: the following function gets the height of the current page:
Function (){
If (window. innerHeight & window. scrollMaxY) {// FF
YScroll = window. innerHeight + window. scrollMaxY;
} Else if (document. body. scrollHeight> document. body. offsetHeight) {// IE
YScroll = document. body. scrollHeight;
} Else {yScroll = document. body. offsetHeight ;}
Return yScroll;
}

 

6. offsetLeft:Obtains the left-side position of an object relative to the layout or the parent coordinate specified by the offsetParent attribute.
7. offsetTop:Obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute.

The following sections are applicable only to IE or FF:

8. window. pageXOffset/pageYOffset:Top position after Page scrolling(Applicable only to FF,Recommended document.doc umentElement. scrollLeft/scrollTop ).
9. window. innerWidth/innerHeight:The size of the browser visible area, that is, the browser menu, toolbar (Applicable only to FFTo modify the browser size.
10. event. offsetY/. offsetX (Applicable only to IE)The cursor pointer is relative to the upper left corner of the event object, that is, the upper left corner of the DIV or TABLE element in the event area is calculated as 0, 0 of the coordinate.
11. event. clientX/. clientY: (applicable only to IE)Unlike offsetX, clientX is calculated from the upper left corner of the body window.
12. The event. x in IE is equal to the event. pageX in FF.
13. window. scrollMaxX/window. scrollMaxY:The maximum value that can be rolled.Only FF is available.

Example:

1. If the width of the body is not restricted by the CSS style sheet, if the body {width: 863px}: is not specified
Document. body. clientWidth = document.doc umentElement. scrollWidth
In contrast, the document.documentelement.scrollwidthof of ieis still equal to document.body.clientwidth, but ffis document.doc umentElement. scrollWidth = the size of the visible area of the browser window. Only document. body. scrollWidth can be equal. We can also see that the two browsers have different definitions for containers.

 

 

Non-physical life:Http://hi.baidu.com/traindiy

/*************************************** **************************************** ********************************
Appendix: refer to the Code appended to this article to view the clientWidth and other values of document. getElementById ("divid ").
IE6.0, FF1.06 +:
ClientWidth = width + padding = 300 + 10 × 2 = 320
ClientHeight = height + padding = 200 + 10 × 2 = 220
OffsetWidth = width + padding + border = 300 + 10 × 2 + 10 × 2 = 340
OffsetHeight = height + padding + border = 200 + 10 × 2 + 10 × 2 = 240

IE5.0/5.5:
ClientWidth = width-border = 300-10 × 2 = 280
ClientHeight = height-border = 200-10 × 2 = 180
Offline setwidth = width = 300
OffsetHeight = height = 200

Appendix 1: differences between event. clientX and event. X:
When event. clientX returns an event, the mouse is relative to the X coordinate of the customer window.
The same is true for event. X.
However, if the property value of the event object is set to relative
Event. clientX unchanged
Event. X returns the coordinates of the event object relative to the ontology.
Appendix 2:
The margin attribute in CSS is independent of clientWidth, offsetWidth, clientHeight, and offsetHeight.
**************************************** **************************************** *******************************/

 

Appendix 1 test code: reference parameter: http://hi.baidu.com/traindiy/blog/item/ebd62234be12883c5ab5f5e9.html

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "[url = require">
<Html xmlns = "[url = http://www.w3.org/5o/xhtml#http://www.w3.org/5o/xhtml#/url]" lang = "gb2312">
<Head>
<Title> code example: test and comparison of clientWidth, offsetWidth, clientHeight, and offsetHeight </title>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Meta name = "author" content = "fengyan, CnLei.y.l@gmail.com">
<Meta name = "copyright" content = "[url = http://www.cnlei.com] http://www.cnlei.com [/url]"/>
<Meta name = "description" content = "test and comparison of clientWidth, offsetWidth, clientHeight, and offsetHeight"/>
<Style type = "text/css" media = "all">
Body {font-size: 14px ;}
A, a: visited {color: # 00f ;}
# Div_CnLei {width: 300px; height: 200px; padding: 10px; border: 10px solid # ccc; background: # eee; font-size: 12px ;}
# Div_CnLei p {margin: 0; padding: 10px; background: # fff ;}
</Style>
<Script type = "text/javascript">
Function Obj (s ){
Return document. getElementById (s )? Document. getElementById (s): s;
}

Function GetClientWidth (o ){
Return Obj (o). clientWidth;
}

Function GetClientHeight (o ){
Return Obj (o). clientHeight;
}

Function GetOffsetWidth (o ){
Return Obj (o). offsetWidth;
}

Function GetOffsetHeight (o ){
Return Obj (o). offsetHeight;
}
</Script>
</Head>
<Body>
<P> click the following link: (div width: 300px, height: 200px, PADDING: 10px, BORDER: 10px) </p>
<Div id = "Div_CnLei">
<P>
<A href = "javascript: alert (GetClientWidth ('div _ cnlei');"> GetClientWidth (); </a>
<A href = "javascript: alert (GetClientHeight ('div _ cnlei');"> GetClientHeight (); </a>
</P>
<P>
<A href = "javascript: alert (GetOffsetWidth ('div _ cnlei');"> GetOffsetWidth (); </a>
<A href = "javascript: alert (GetOffsetHeight ('div _ cnlei');"> GetOffsetHeight (); </a>
</P>
</Div>
<Div id = "Description">
<P> <strong> IE6.0, FF1.06 +: </strong> <br/> clientWidth = width + padding = 300 + 10 × 2 = 320 <br/> clientHeight = height + padding = 200 + 10 × 2 = 220 <br /> offsetWidth = width + padding + border = 300 + 10 × 2 + 10 × 2 = 340 <br/> offsetHeight = height + padding + border = 200 + 10 × 2 + 10 × 2 = 240
</P>
<P> <strong> IE5.0/5.5: </strong> <br/> clientWidth = width-border = 300-10 × 2 = 280 <br/> clientHeight = height-border = 200-10 × 2 = 180 <br/> offsetWidth = width = 300 <br/> offsetHeight = height = 200
</P>
</Div>
</Body>
</Html>