JS obtains screen, browser, webpage height, and width information for locating

This article introduces how to locate JS screen, browser, webpage height, and width information.

[Ad # content] When operating DOM in JS, the height and width of the browser are often used to adjust the DOM position. Here we will record it.

The Code is as follows:

Copy code

<Script language = "javascript"> Function getDocumentSize (){ Var str = ''; Str + = document. body. clientWidth + "rn"; // visible area width of the webpage Str + = document. body. clientHeight + "rn"; // The visible area of the webpage is high. Str + = document. body. offsetWidth + "rn"; // visible area of the webpage (including the width of the edge) Str + = document. body. offsetHeight + "rn"; // visible area of the webpage (including the width of the edge) Str + = document. body. scrollWidth + "rn"; // The full text width of the webpage. Str + = document. body. scrollHeight + "rn"; // The full text of the webpage is high. Str + = document. body. scrollTop + "rn"; // The height of the webpage to be rolled Str + = document. body. scrollLeft + "rn"; // The left where the webpage is rolled Str + = window. screenTop + "rn"; // The webpage body Str + = window. screenLeft + "rn"; // left of the webpage body Str + = window. screen. height + "rn"; // high screen resolution Str + = window. screen. width + "rn"; // screen resolution width Str + = window. screen. availHeight + "rn"; // available workspace height on the screen Str + = window. screen. availWidth + "rn"; // available workspace width on the screen Alert (str ); } </Script>

Here are two Special tips:

1. Sometimes document. body. scrollTop and document. body. clientHeight are invalid because DOCTYPE is declared:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Replace umentElement.

2. window. screenTop and window. screenLeft is not defined in Firefox. It can only be used in IE. It refers to the distance between the webpage body part and the side on the display screen, I was not very clear when I tested this. In fact, this height is also very useful. When you need to use the open function to open a window, you can use this distance to locate the new window.

Example

The Code is as follows:

Copy code

Function calc_scroll_xy () { _ Browser_scroll_x = 0; _ Browser_scroll_y = 0; If (typeof (window. pageyoffset) = 'number ') { // Netscape compliant _ Browser_scroll_y = window. pageyoffset; _ Browser_scroll_x = window. pagexoffset; } Else if (document. body & (document. body. scrollleft | document. body. scrolltop )) { // Dom compliant _ Browser_scroll_y = document. body. scrolltop; _ Browser_scroll_x = document. body. scrollleft; } Else if (document.doc umentelement & (document.doc umentelement. scrollleft | document.doc umentelement. scrolltop )) { // Ie6 standards compliant mode _ Browser_scroll_y = document.doc umentelement. scrolltop; _ Browser_scroll_x = document.doc umentelement. scrollleft; } }

JQuery:

The Code is as follows:

Copy code

$ (Document). ready (function (){ Alert ($ (window). height (); // The visible area height of the current window in the browser Alert ($ (document). height (); // The height of the current window document in the browser Alert ($ (document. body). height (); // The height of the current file body in the browser window Alert ($ (document. body). outerHeight (true); // the total height of the current file body in the browser window includes border padding margin. Alert ($ (window). width (); // The width of the visible area of the current window in the browser Alert ($ (document). width (); // width of the document Object in the current window of the browser Alert ($ (document. body). width (); // The width of the document body in the current window of the browser Alert ($ (document. body). outerWidth (true); // The total width of the current file body in the browser window includes border padding margin })

1. You can obtain the width and height of the inside of multiple browsers.

2. Like other browsers (Opera, Chrome, FirFox, and Safari) in IE 9, Windows is supported. innerHeight, window. innerWidth, window. outerHeight, window. the four properties outerWidth are used to obtain the width and height of the browser's window and view. However, IE versions earlier than IE9 do not have these attributes. Therefore, in this case, I equivalent the concept of a viewport to a window.

2. Although the window has width and height information, it is not necessarily the true width and height information of the real browser window. Some browsers do not return the height information such as the menu bar and toolbar.

 

Example:

On a page with too many vertical content, make sure that a DIV is always at the center of the view (non-Precise center ):

Code:

The Code is as follows:

Copy code

Window. onload = window. onresize = function (){ Var top = Math. round (Browser. page. scrollTop () + (Browser. viewPort. height ()/2)-(parseInt (document. getElementById ("divCenter "). style. height)/2 )); Var left = Math. round (Browser. page. scrollLeft () + (Browser. viewPort. width ()/2)-(parseInt (document. getElementById ("divCenter "). style. width)/2 )); Document. getElementById ("divCenter"). style. top = top + "px "; Document. getElementById ("divCenter"). style. left = left + "px "; }