JS access to screen, browser, Web page height, width information positioning

[Ad#content] in the JS Operation Dom, will often use the browser's height and width to adjust the DOM position, here Special record.

The code is as follows

Copy Code

<script language= "JavaScript" > function Getdocumentsize () { var str = '; str+=document.body.clientwidth+ "RN"//page visible area wide str+=document.body.clientheight+ "RN"//page Visible Area high str+=document.body.offsetwidth+ "RN"//page visible area high (including edge width) str+=document.body.offsetheight+ "RN"//page visible area high (including edge width) str+=document.body.scrollwidth+ "RN"/page Full text width str+=document.body.scrollheight+ "RN"/page full text high str+=document.body.scrolltop+ "RN";/page is rolled high str+=document.body.scrollleft+ "RN";/the page is rolled away to the left str+=window.screentop+ "RN";//on the body part of the Web page str+=window.screenleft+ "RN"/page body part left str+=window.screen.height+ "RN";//High screen resolution str+=window.screen.width+ "RN";//width of screen resolution str+=window.screen.availheight+ "RN";//Screen available workspace height str+=window.screen.availwidth+ "RN"//Screen available workspace width alert (str); } </script>

Here's a special tip for two points:

1, Document.body.scrollTop and document.body.clientHeight sometimes ineffective, the reason is because the declaration of the DOCTYPE:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
When the DOCTYPE is declared, the value of Document.body.scrollTop is always equal to 0, and the solution is to replace document.body with Document.documentelement.

2, Window.screentop And window.screenleft are not defined in Firefox, it can only play a role in IE, refers to the main body part of the Web page and the screen on the edge of the distance, just testing this time I am not very clear, in fact, this height is also very useful, when you need to use the Open function opened a window, it You can use this distance to position the newly opened window.

Cases

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.documentelement && document.documentelement.scrollleft | | Document.documentelement.scrolltop)) { IE6 Standards compliant mode _browser_scroll_y = Document.documentelement.scrolltop; _browser_scroll_x = Document.documentelement.scrollleft; } }

Jquery:

The code is as follows

Copy Code

$ (document). Ready (function () { Alert ($ (window). Height ()); Browser current window visual area height Alert ($ (document). Height ()); The height of the browser's current window document Alert ($ (document.body). Height ());//browser Current window document body level Alert ($ (document.body). Outerheight (True))//Browser Current window document body's total height includes border padding margin Alert ($ (window). width ()); Browser current window visual area width Alert ($ (document). width ());//browser Current window Document object widths Alert ($ (document.body). width ());//browser Current window document body widths Alert ($ (document.body). Outerwidth (True))//Browser The total width of the body of the current window document includes border padding margin })

1, has been able to support access to multiple browsers within the width and height of the viewport information

2, in IE 9 already and other browsers (Opera, Chrome, Firfox, Safari) have been able to support the use of Window.innerheight, Window.innerwidth, Window.outerheight, Window.outerwidth these four properties get the width height information of the browser's window, viewport, but IE9 's previous IE versions do not have these properties, so in this case, I equate the concept of viewport and window.

2. Although window has width and height information, it is not necessarily the true width and height information of the Real browser window. Because some browsers return results that do not contain the height information for the menu bar, toolbars, and so on.

Example Demo:

In a page with too much vertical content, make a div always remain in the center of the viewport (not the exact center position):

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"; }