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

  • 2020-03-30 01:22:32
  • OfStack

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.
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201401/20140114093552.png ">

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)


Related articles: