Comparison between the page height and width obtained by js in IE and FF

When developing web Front-end, we often use JavaScript to obtain the page height and width. However, the method obtained in different browsers is different, or the method is the same, but because IE and FF have different implementations of web standards, the same method is two.

When developing web Front-end, we often use JavaScript to obtain the page height and width. However, the method obtained in different browsers is different, or the method is the same, however, because IE and FF have different implementations of the web standard, the two browsers in the same method obtain different heights or widths. Next, we will compare the page height and width obtained by js in IE and FF:
1. window. screen. width/. height: Display size (General for IE and FF) 1440*900-> not related to whether the browser is full screen

22.16document.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): Same as above, but the value of the object is changed to BODY. When there is no content in the BODY, the value of clientHeight is 18 under IE, 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 the value obtained by IE): for example, IE 1440, FF: 1442. This value is irrelevant to the content in the BODY, 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: gets the width/height of the 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: the object is body, and 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 );
}
// When the body content in IE is not out of the range and is set with overflow = "auto", 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 position of the 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: the top position behind the page (applicable only, document.doc umentElement. scrollLeft/scrollTop ).
9. window. innerWidth/innerHeight: the size of the browser area, that is, the tool bar of the browser menu is not included (only ff, document.doc umentElement. clientHeight is recommended), and the browser size is changed.
10. event. offsetY /. offsetX: (applicable only to IE) the cursor pointer is relative to the position in the upper left corner of the object where an event occurs, that is, the upper left corner of the DIV or TABLE element in the event zone is calculated as 0, 0 of the coordinates.
11. event. clientX/. clientY: (only applicable 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.