Obtain the length of various visible borders in the browser

I finally figured out why I used document. Body. clientheight, document. Body. offsetheight to get the correct value of the visible area of the webpage. The original culprit was the W3C standard !! Under the newly defined standard, document.doc umentelement. clientheight can get the correct values in IE and Firefox. The following article details the differences in obtaining the visible window sizes of various browsers:

<SCRIPT>
Function getinfo ()
{
   VaR S = "";
   S + = "visible area width of the webpage:" + document. Body. clientwidth;
   S + = "visible area height of the webpage:" + document. Body. clientheight;
   S + = "visible area width of the webpage:" + document. Body. offsetwidth + "(including the width of the edge and scroll bar )";
   S + = "visible area height of the webpage:" + document. Body. offsetheight + "(including the width of the edge )";
   S + = "webpage body full text width:" + document. Body. scrollwidth;
   S + = "webpage text Height:" + document. Body. scrollheight;
   S + = "high page volume (FF):" + document. Body. scrolltop;
   S + = "high page volume (IE):" + document.doc umentelement. scrolltop;
   S + = "Left of the webpage to be rolled:" + document. Body. scrollleft;
   S + = "webpage body part:" + window. screentop;
   S + = "webpage body part left:" + window. screenleft;
   S + = "Screen Resolution Height:" + window. Screen. height;
   S + = "Screen Resolution width:" + window. Screen. width;
   S + = "available screen workspace Height:" + window. Screen. availheight;
   S + = "available workspace width:" + window. Screen. availwidth;
   S + = "your screen settings are" + window. Screen. colordepth + "bit color ";
   S + = "Your Screen Settings" + window. Screen. devicexdpi + "pixels/inches ";
   // Alert (s );
}
Getinfo ();
</SCRIPT>
In my local test:
It can be used in IE, Firefox, and opera
Document. Body. clientwidth
Document. Body. clientheight
It is very simple and convenient.
In the company's projects:
Opera is still in use
Document. Body. clientwidth
Document. Body. clientheight
However, ie and Firefox use
Document.doc umentelement. clientwidth
Document.doc umentelement. clientheight
It turned out to be W3C standards.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If this line is added to the page

In ie:
Document. Body. clientwidth ==> body object width
Document. Body. clientheight ==> body object height
Document.doc umentelement. clientwidth ==> visible area width
Document.doc umentelement. clientheight => visible area height
In Firefox:
Document. Body. clientwidth ==> body object width
Document. Body. clientheight ==> body object height
Document.doc umentelement. clientwidth ==> visible area width
Document.doc umentelement. clientheight => visible area height
?
In opera:
Document. Body. clientwidth ==> visible area width
Document. Body. clientheight ==> visible area height
Document.doc umentelement. clientwidth ==> Page Object width (that is, the width of the body object plus the margin width)
Document.doc umentelement. clientheight ==> Page Object height (that is, the height of the body object plus the margin height)
If W3C standards are not defined
IE:
Document.doc umentelement. clientwidth ==> 0
Document.doc umentelement. clientheight => 0
Firefox:
Document.doc umentelement. clientwidth ==> Page Object width (that is, adding the bodyobject width to the marginwidth) document.doc umentelement. clientheight ==> Page Object height (that is, the body object height plus the margin height)
Opera:
Document.doc umentelement. clientwidth ==> Page Object width (that is, adding the bodyobject width to the marginwidth) document.doc umentelement. clientheight ==> Page Object height (that is, the body object height plus the margin height)

Original address: http://www.css88.com/article.asp? Id = 133

Determine the browser type:
VaR UA = navigator. useragent. tolowercase ();
VaR OS = new object ();
OS. isfirefox = UA. indexof ("gecko ")! =-1;
OS. isopera = UA. indexof ("Opera ")! =-1;
OS. isie =! OS. isopera & UA. indexof ("MSIE ")! =-1;

Obtain the size of the browser area://
// Getpagescroll ()
// Returns array with X, Y page scroll values.
// Core code from-quirksmode.org
//
Function getpagescroll (){

  VaR yscroll;  If (self. pageyoffset ){
    Yscroll = self. pageyoffset;
  } Else if (document.doc umentelement & document.doc umentelement. scrolltop ){ // Explorer 6 strict
    Yscroll = document.doc umentelement. scrolltop;
  } Else if (document. Body) {// all other referers
    Yscroll = Document. Body. scrolltop;
  }  Arraypagescroll = new array ('', yscroll)
  Return arraypagescroll;
}  //
// Getpagesize ()
// Returns array with page width, height and window width, height
// Core code from-quirksmode.org
// Edit for Firefox by phaez
//
Function getpagesize (){
 
  VaR xscroll, yscroll;
 
  If (Windows. innerheight & window. scrollmaxy ){
    Xscroll = Document. Body. scrollwidth;
    Yscroll = windows. innerheight + window. scrollmaxy;
  } Else if (document. Body. scrollheight> document. Body. offsetheight) {// all but explorer Mac
    Xscroll = Document. Body. scrollwidth;
    Yscroll = Document. Body. scrollheight;
  } Else {// explorer Mac... wocould also work in Explorer 6 strict, Mozilla and Safari
    Xscroll = Document. Body. offsetwidth;
    Yscroll = Document. Body. offsetheight;
  }
 
  VaR implements wwidth, implements wheight;
  If (self. innerheight ){ // All privileges t Explorer
    Required wwidth = self. innerwidth;
    Optional wheight = self. innerheight;
  } Else if (document.doc umentelement & document.doc umentelement. clientheight) {// Explorer 6 strict Mode
    Required wwidth = document.doc umentelement. clientwidth;
    Required wheight = document.doc umentelement. clientheight;
  } Else if (document. Body) {// other explorers
    Required wwidth = Document. Body. clientwidth;
    Optional wheight = Document. Body. clientheight;
  }
 
  // For small pages with total height less then height of the viewport
  If (yscroll <windowheight ){
    Pageheight = running wheight;
  } Else {
    Pageheight = yscroll;
  }  // For small pages with total width less then width of the viewport
  If (xscroll <1_wwidth ){
    Pagewidth = required wwidth;
  } Else {
    Pagewidth = xscroll;
  }  Arraypagesize = new array (pagewidth, pageheight, expires wwidth, expires wheight)
  Return arraypagesize;
}Address: http://dakular.spaces.live.com/Blog/cns! 8668ffec49bc51ce! 440. Entry