javascript

IE and FF javascript to get the difference in page and window size

Under the new definition of standard document. The documentElement. ClientHeight in Internet explorer and firefox can obtain the correct values, the following article introduces in detail for various browsers visible window size the differences:

< Script language = “javascript” > The function getInfo () {       Var s = "";       S += “page visible area width: ”+ Document. Body. ClientWidth ;       S += “page visible area high: ”+ Document. Body. ClientHeight ;       S + = “page visible region wide:” + document. The body. The offsetWidth + “(including the edges and the width of the scroll bar)”;       S + = “page visible region high:” + document. Body. OffsetHeight + “(including line width)”;       S + = “full width page text:” + document. Body. ScrollWidth;       S + = “high full page text:” + document. Body. ScrollHeight;       S += “page volume high (ff) : ”+ document.body.scrolltop;       S + = “web swept to high (ie) :” + document. The documentElement. ScrollTop;       S += “page scroll to the left: ”+ document.body.scrollleft;       S += ”+ window.screenTop;       S += “page body left: ”+ window.screenLeft;       S += “high screen resolution: ”+ window.screen.height;       S += “width of screen resolution: ”+ window.screen.width;       S + = “screen can use the workspace height:” + Windows. Screen. AvailHeight;       S += “screen available workspace width: ”+ window.screen.availwidth;       S += “your screen Settings are ”+ window.screen.colordepth +” bit color ”;       S += “your screen Settings ”+ window.screen.devicexdpi +” pixels per inch ”;       Alert (s); } GetInfo (); < / script>

In local testing: It works with IE, FireFox, and Opera Document. Body. ClientWidth Document. Body. ClientHeight Accessible, very simple, very convenient.

And in the company’s projects: Opera still USES Document. Body. ClientWidth Document. Body. ClientHeight Internet explorer and FireFox do Document. The documentElement. ClientWidth Document. The documentElement. ClientHeight

< ! PUBLIC DOCTYPE HTML ”- / / The W3C / / DTD XHTML 1.0 Transitional / / EN "" 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. The documentElement. ClientWidth = = > Visible area width Document. The documentElement. ClientHeight = = > Height of visible area In FireFox: Document. Body. ClientWidth = = > BODY object width Document. Body. ClientHeight = = > BODY object height Document. The documentElement. ClientWidth = = > Visible area width Document. The documentElement. ClientHeight = = > Height of visible area

In the Opera: Document. Body. ClientWidth = = > Visible area width Document. Body. ClientHeight = = > Height of visible area Document. The documentElement. ClientWidth = = > Page object width (that is, BODY object width plus Margin width) Document. The documentElement. ClientHeight = = > Page object height (BODY object height plus Margin height)

Suppose that obj is an HTML control.

Obj. OffsetTop refers to the position, integer, unit pixel, of the obj distance above or above the control.

Obj. OffsetLeft refers to the position of obj to the left or upper control, integer, unit pixel.

Obj. OffsetWidth refers to the obj control’s own width, integer, unit pixel.

Obj. OffsetHeight refers to the height, integer, and unit pixel of the obj control itself.

Let’s make a note of the “top or top” and “left or top” controls mentioned earlier.

Such as: < Div id = “tool” >           < Input type=“button” value=” submit ”>           < Input type=“button” value=” reset ”> < / div>

The offsetTop of the “submit” button is the distance between the “submit” button and the border on the “tool” layer, because the border on the top of the “tool” layer is the closest to it. The offsetTop of the “reset” button is the distance between the “reset” button and the border on the “tool” layer, because the border on the top of the “tool” layer is the closest to it.

The offsetLeft of the “submit” button is the distance between the “submit” button and the left border of the “tool” layer, because the closest left border to the “tool” layer is the left border of the “tool” layer. OffsetLeft of the “reset” button is the distance between the “reset” button and the right border of the “submit” button, because the closest border to its left is the right border of the “submit” button.

OffsetTop can get the position of the HTML element from the top or the outer element, and style.top is also ok. The difference between the two is:

OffsetTop returns a number, while style.top returns a string with the unit: px in addition to the number.

Ii. OffsetTop reads only, while style.top reads and writes.

Style.top returns an empty string if the top style is not specified for the HTML element.

The same is true for offsetLeft and style.left, offsetWidth and style.width, offsetHeight and style.height.

ScrollHeight: gets the scrolling height of the object.   ScrollLeft: sets or gets the distance between the left edge of the object and the leftmost end of the currently visible content in the window ScrollTop: sets or gets the distance between the top of the object and the top of the visible content in the window ScrollWidth: gets the scrolling width of the object OffsetHeight: gets the height of the object relative to the layout or the parent coordinate specified by the parent offsetParent property OffsetLeft: gets the calculated left position of the object relative to the layout or parent coordinates specified by the offsetParent attribute OffsetTop: gets the calculated top position of the object relative to the layout or the parent coordinate specified by the offsetTop attribute. Event.clientx horizontal coordinates relative to the document The vertical coordinates of event.clienty relative to the document

The horizontal coordinates of event.offsetx relative to the container The vertical coordinate & send of the event. OffsetY relative to the container; Document. The documentElement. ScrollTop vertical scrolling Event. ClientX + document. DocumentElement. ScrollTop horizontal coordinate relative documents plus the amount of vertical scrolling  

Above mainly refers to IE, FireFox differences are 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 (note: margin property in CSS, independent of clientWidth, offsetWidth, clientHeight, offsetHeight)