js/jquery取得瀏覽器視窗視覺區域高度和寬度以及捲軸高度實作程式碼_jquery

取得瀏覽器視窗的可視區域高度和寬度,滾動條高度有需要的朋友可參考一下。
IE中，瀏覽器顯示視窗大小只能以下取得： 程式碼如下複製程式碼

複製程式碼 程式碼如下:

document.body.offsetWidth
document.body.offsetHeight

在聲明了DOCTYPE的瀏覽器中，可以用以下來取得瀏覽器顯示視窗大小：程式碼如下複製程式碼

複製程式碼 程式碼如下:

document.documentElement. document.documentElement.clientHeight


IE，FF，Safari皆支援此方法，opera雖支援該屬性，但傳回的是頁面尺寸；

同時，除了IE以外的所有瀏覽器都將此資訊保存在window物件中，可用以下取得： 程式碼如下複製程式碼

複製程式碼 程式碼如下:

window.innerWidth

window.innerHeight


整個網頁尺寸一般取得方法 程式碼如下複製程式碼

程式碼 程式碼如下:

document.body.scrollWidth
document.body.scrollHeight

螢幕解析度尺寸方法 程式碼如下複製程式碼

複製程式碼 程式碼如下:

window.screen. >window.screen.width


總結實例

複製程式碼複製程式碼

複製程式碼


程式碼如下
function getViewSizeWithoutScrollbar(){//不包含滾動條
return {
width : document.documentElement.clientWidth,
height: document.documentElement.clientWidth,
height: document.documentElement.clientWidth,
height: documclient.t. }
function getViewSizeWithScrollbar(){//包含捲軸
if(window.innerWidth){
return {
width : window.innerWidth,
Height}
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){
return {
width : document.documentElement.offsetWidth,
width : document.documentElement.offsetWidth,
height:documentElement. }
}else{
return {
width : document.documentElement.clientWidth getScrollWith(),
height: document.documentElement.clientHeight getScroll>🎜>height: document.documentElement.clientHeight getScroll> }

IE，FireFox 差異如下：
IE6.0、FF1.06 ： 

複製程式碼

複製程式碼



複製程式碼



複製程式碼

複製碼

程式碼如下:clientWidth = width padding clientHeight = height padding offsetWidth = width padding border : clientWidth = width - border

clientHeight = height - border

offsetWidth = width
offsetHeight = height

offsetHeight = height另附寬最常用的獲取整頁方法（需jquery框架） 程式碼如下複製程式碼複製程式碼 程式碼如下: 程式碼如下:$( document).width() $(document).height()
alert($(window).height()); //瀏覽器時下視窗可視區域高度
alert($(document).height()); //瀏覽器時下方視窗文件的高度
alert($(document.body).height());//瀏覽器時下視窗文檔body的高度
alert($(document.body).outerHeight(true));//瀏覽器時下視窗文檔body的總高度包括border padding margin
alert($(window).width()); //瀏覽器時下視窗可視區域寬度
alert($(document).width());/ /瀏覽器時下視窗文件對於象寬度
alert($(document.body).width());//瀏覽器時下視窗文件body的高度
alert($(document.body).outerWidth( true));//瀏覽器時下視窗文件body的總寬度包括border padding margin

alert($(document).scrollTop()); //取得捲軸到頂部的垂直高度
alert($(document).scrollLeft()); //取得捲軸到左邊的垂直寬度