Js/jquery Gets the height and width of the viewable area of the browser window and the scroll bar height implementation code _jquery

Gets the height and width of the viewable area of the browser window, and the scroll bar is highly needed for a friend to refer to.
In IE, the browser display window size can only be obtained from the following: Code copy Code as follows

Copy Code code as follows:

Document.body.offsetWidth
Document.body.offsetHeight

In a browser that declares DOCTYPE, you can use the following to get the browser display window size: The code is copied as follows

Copy Code code as follows:

Document.documentElement.clientWidth
Document.documentElement.clientHeight

Ie,ff,safari supports this method, although opera supports this property, but returns the page size;
At the same time, all browsers except IE have this information saved in the Window object, which can be obtained by using the following: Code copy Code as follows

Copy Code code as follows:

Window.innerwidth
Window.innerheight

The entire page size generally obtains the method code to copy the code as follows

Copy Code code as follows:

Document.body.scrollWidth
Document.body.scrollHeight

Screen resolution height generally get method code as follows copy code

Copy Code code as follows:

Window.screen.height
Window.screen.width

Summarize the example

Copy Code code as follows:

function Getviewsizewithoutscrollbar () {//does not contain scroll bars
return {
Width:document.documentElement.clientWidth,
Height:document.documentElement.clientHeight
}
}
function Getviewsizewithscrollbar () {//contains scroll bars
if (window.innerwidth) {
return {
Width:window.innerWidth,
Height:window.innerHeight
}
}else if (document.documentElement.offsetWidth = = document.documentElement.clientWidth) {
return {
Width:document.documentElement.offsetWidth,
Height:document.documentElement.offsetHeight
}
}else{
return {
Width:document.documentElement.clientWidth + getscrollwith (),
Height:document.documentElement.clientHeight + getscrollwith ()
}
}
}

Ie,firefox differences are as follows:
IE6.0, ff1.06+:

Copy Code code as follows:

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

Other personal most commonly used to get the full page width of the method (requires the jquery framework) code to copy the code as follows

Copy Code code as follows:

$ (document). Width () < $ (' body '). Width ()? $ (document). Width (): $ (' body '). width ();
$ (document). Height () < $ (' body '). Height ()? $ (document). Height (): $ (' body '). Height ();

Alert ($ (window). Height ()); Height of window viewable area in browser
Alert ($ (document). Height ()); The height of the window document in the browser nowadays
Alert ($ (document.body). Height ());//browser Current window document body level
Alert ($ (document.body). Outerheight (True))//Browser The total height of the body of the window document currently includes border padding margin
Alert ($ (window). width ()); Window viewable area width in browser
Alert ($ (document). width ());//browser Current window document for image width
Alert ($ (document.body). width ());//browser Current window document body height
Alert ($ (document.body). Outerwidth (True))//Browser The total width of the body of the window document currently includes border padding margin

Alert ($ (document). ScrollTop ()); Gets the vertical height of the scroll bar to the top
Alert ($ (document). ScrollLeft ()); Gets the vertical width of the scroll bar to the left