JS get the browser and screen wide higher information code

  This article mainly introduces JS to obtain the browser and screen wide higher information, the specific implementation of the need for friends can refer to the following

Web page visible Area wide:document.body.clientwidth  page visible area high:document.body.clientheight  Web page Visible area wide: document.body.offsetWidth (including edge width)   page visible Area High: document.body.offsetHeight (including edge width)   Web page text full text wide:document.body.scrollwidth  page full text high:document.body.scrollheight  pages are rolled High: document.body.scrollTop   pages are rolled away left:document.body.scrollleft  page body part:window.screentop  page body part left:window.screenleft  Screen resolution of the High:window.screen.height  screen resolution of the wide:window.screen.width  screen available workspace height:window.screen.availheight  Screen available workspace width:window.screen.availwidth  html precise positioning:scrollleft,scrollwidth,clientwidth,offsetwidth  ScrollHeight: Gets the scrolling height of the object.   ScrollLeft: Sets or gets the left distance between the left edge of the object and the current visible content in the window   scrolltop: Sets or gets the distance between the top of the object and the topmost of the visible content in the window   scrollwidth : Gets the scrolling width   offsetheight of the object: Gets the height   offsetleft of the object relative to the layout or the parent coordinates specified by the parent coordinate offsetparent property: Gets the object relative to the layout or by the offsetparent Calculates the left position of the parent coordinates specified by the property   offsettop: Gets the top position   EVENT.CLIENTX relative document horizontal coordinates of the object relative to the layout or the parent coordinates specified by the offsettop property   Vertical coordinates of event.clienty relative documents   Event.offsetx the horizontal coordinates of the container   event.offsety relative to the container's vertical coordinates   DOCUMENT.DOCUMENTELEMENT.SCROLLTOP the vertical direction of scrolling.   Event.clientx+document.documentelement.scrolltop relative to the document's horizontal coordinates + vertical scrolling volume     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:  Clientwidt h = width-border    clientheight = height-border    offsetwidth = width    offsetheight = height    (need to mention: CSS margin properties, and ClientWidth, Offsetwidth, clientheight, offsetheight are irrelevant)     -------------------    Technical Essentials     This section of the code mainly uses some of the properties of the Document object about the window, and the main functions and usages of these properties are as follows.     To get the size of the window, for different browsers, you need to use different properties and methods: To detect the real size of the window, the properties of Windows need to be used under Netscape; In the DOM environment, to get the size of the window, you need to be aware of the size of the root element, not the element. The Innerwidth property of the     Window object contains the internal width of the current window. I of the Window objectThe Nnerheight property contains the internal height of the current window. The Body property of the     Document object corresponds to the label of the HTML document. The DocumentElement property of the Document object represents the root node of the HTML document.     Document.body.clientHeight represents the current height of the window in which the HTML document resides. Document.body. clientwidth represents the current width of the window in which the HTML document resides.     Implementation code <!—————————— filename: 30.3.htm —————————— >    code as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"   "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">  <html xmlns=" http://www.w3.org/1999/xhtml ">  <head>  < title> Please adjust the browser window </title>  <meta http-equiv= "Content-type content=" text/html; charset=gb2312 ">  </head>  <body>  <h2 align=" center > Please adjust browser window size </h2> <hr>  <form action= "#" method= "Get" Name= "Form1" Id= "Form1" >  <!– displays the actual dimensions of the browser window –>  The actual height of the browser window: <input type= "text" name= "availheight" size= "4" ><br>  the actual width of the browser window: <input type= "Text" NA Me= "Availwidth" size= "4" ><br>  </form>  <script type= "Text/javascript" >  <!–  var winwidth = 0;  var winheight = 0;  Fu Nction finddimensions ()//function: Get size   { //Get window width   if (window.innerwidth)   Winwidth = window.innerwidth;  else if ((document.body) && (document.body.clientWidth))   Winwidth = document.body.clientwidth; //Get window height   if (window.innerheight)   Winheight = window.innerheight;  else if ((document.body) && (document.body.clientHeight))   Winheight = document.body.clientheight;  Check the body inside the document to get the window size   if (document.documentelement && Document.documentElement.clientHeight && document.documentElement.clientWidth)   {  winheight = document.documentelement.clientheight;  winwidth = document.documentelement.clientwidth; } // Results output to two text boxes   document.form1.availheight.value= winheight;  document.form1.availwidth.value= winWidth;  }  FinddimEnsions (); //Call function, get numerical   window.onresize=finddimensions; //–>  </script>  </ body>  </html>    Source program     (1) The program first establishes a form that contains two text boxes to display the current width and height of the window, and The values change with the size of the window.     (2) in the following JavaScript code, two variables winwidth and winheight are first defined to hold the height and width values of the window.     (3) Then, in function finddimensions (), use Window.innerheight and window.innerwidth to get the height and width of the window and save the two in the preceding two variables.     (4) and then through the document inside the body to detect, get the window size, and stored in the above two variables.     (5) at the end of the function, the result is output to two text boxes by accessing the form element by name.     (6) At the end of the JavaScript code, complete the operation by calling the Finddimensions () function.