js/jquery gets the height and width of the visible area of ​​the browser window and the height of the scroll bar implementation code_jquery

Get the height and width of the visible area of ​​the browser window. Friends who need the height of the scroll bar can refer to it.
In IE, the browser display window size can only be obtained as follows: The code is as follows. Copy the code

Copy the code The code is 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 as follows Copy the code

Copy the code The code is as follows:

document.documentElement.clientWidth
document.documentElement.clientHeight

IE, FF, and Safari all support this method. Although opera supports this attribute, it returns the page size;
At the same time, all browsers except IE This information is saved in the window object and can be obtained using the following code: Copy code

Copy code Code is as follows:

window.innerWidth
window.innerHeight

The general method to obtain the size of the entire webpage is as follows Copy the code

Copy Code The code is as follows:

document.body.scrollWidth
document.body.scrollHeight

The screen resolution height is generally obtained Method The code is as follows. Copy the code

Copy the code The code is as follows:

window.screen.height
window.screen.width

To summarize the example

Copy the code The code is as follows:

function getViewSizeWithoutScrollbar(){//Does not contain scroll bar
return {
width : document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
function getViewSizeWithScrollbar(){//Contains scroll bar
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()
}
}
}

The differences between IE and FireFox are as follows:
IE6.0, FF1.06:

Copy code The code is 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

Attached is the most commonly used method for obtaining the width and height of the entire page. Method (requires jquery framework) The code is as follows. Copy the code

Copy the code The code is as follows:

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

alert($(window).height()); //Height of the visible area of ​​the current window of the browser
alert($(document).height()); //Height of the current window document of the browser
alert($(document.body).height());//The height of the document body in the browser’s current window
alert($(document.body).outerHeight(true));//The height of the browser’s current window The total height of the document body includes border padding margin
alert($(window).width()); //The width of the browser’s current window visible area
alert($(document).width());/ /The width of the current window document of the browser
alert($(document.body).width());//The height of the body of the current window document of the browser
alert($(document.body).outerWidth( true)); //The total width of the browser's current window document body includes border padding margin

alert($(document).scrollTop()); //Get the vertical height of the scroll bar to the top
alert($(document).scrollLeft()); //Get the vertical width of the scroll bar to the left