js/jquery obtains the height and width of the browser window's visible area and the scroll bar height implementation code

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

document.body.offsetWidth 
document.body.offsetHeight

In browsers that declare DOCTYPE, you can use the following to obtain the browser display window size: Copy the code as follows Code

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 save this information in the window Object, you can use the following to obtain: The code is as follows Copy the code

window.innerWidth 
window.innerHeight

The general method of obtaining the size of the entire web page The code is as follows Copy the code

document.body.scrollWidth 
document.body.scrollHeight

The general method of obtaining the screen resolution height The code is as follows Copy the code

window.screen.height 
window.screen.width

Summarize the examples

function getViewSizeWithoutScrollbar(){//不包含滚动条 
return { 
width : document.documentElement.clientWidth, 
height: document.documentElement.clientHeight 
} 
} 
function getViewSizeWithScrollbar(){//包含滚动条 
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+:

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 full page width and height. Method (requires jquery framework) The code is as follows Copy the code

$(document).width() < $(&#39;body&#39;).width() ? $(document).width() : $(&#39;body&#39;).width(); 
$(document).height() < $(&#39;body&#39;).height() ? $(document).height() : $(&#39;body&#39;).height();

alert($(window).height()); //The height of the visible area of ​​the current window of the browser
alert($(document). height()); //The height of the browser's current window document
alert($(document.body).height()); //The height of the browser's current window document body
alert($(document. body).outerHeight(true)); //The total height of the browser's current window document body includes border padding margin
alert($(window).width()); //The browser's current window visible area width
alert($(document).width());//The browser’s current window document object width
alert($(document.body).width());//The browser’s current window document body Height
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

More js/jquery Get browse Please pay attention to the PHP Chinese website for related articles about the height and width of the visible area of ​​the browser window and the implementation code of the scroll bar height!