JS get screen, browser window size, page height width

  This article mainly introduces JS access screen, browser window size, Web page height width of the implementation code. Need friends can come to the reference, I hope to help you.

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   Event.clienty phaseVertical coordinates   EVENT.OFFSETX relative to container's horizontal coordinate   event.offsety relative container's vertical coordinate to the document   DOCUMENT.DOCUMENTELEMENT.SCROLLTOP The vertical scrolling value   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:  clientwidth = width -border  clientheight = height-border  offsetwidth = width  offsetheight = height    (need to mention: C Margin attribute in SS, independent of ClientWidth, Offsetwidth, ClientHeight, offsetheight   Web page visible area wide: document.body.clientWidth Page visible Area High: Document.body.clientHeight page visible area wide: document.body.offsetWidth (including edge width) page visible Area High: Document.body.offsetHeight ( Including the edge of the high page text full text width: Document.body.scrollWidth Web page text High: Document.body.scrollHeight pages are rolled High: document.body.scrollTop Pages are rolled left: Document.body.scrollLeft page body part: Window.screentop page body part left: WindoHigh W.screenleft Screen Resolution: Window.screen.height Screen resolution width: window.screen.width screen available workspace height: window.screen.availHeight Screen available workspace width: window.screen.availwidth -------------------  Technical Essentials   This section of the code mainly uses some of the properties of the Document object about the window. The main features and usage 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, in Netscape need to use the properties of Windows, under IE need to go deep inside the document to detect the body; In a 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. The Innerheight property of the Window object contains the internal height of the current windows. 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   code is 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 browser window </title> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "> </head> <body> <h2 align=" Center "> 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 t Ype= "text" name= "availwidth" size= "4" ><br> </form> <script type= "Text/javascript" > <!--   var winwidth = 0; var winheight = 0; function finddimensions ()//functions: Get dimension {//Get window width if (window.innerwidth) winwidth = window.innerwidth; else if (document.bod Y) && (document.body.clientWidth)) winwidth = Document.body.clientWidth; Gets the 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 to 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. Also, the values change as the window size changes.   (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) further 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.