js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码-tutorial js-php.cn

js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

高洛峰

Lepaskan： 2017-01-11 09:39:25

asal

1714 orang telah melayarinya

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。
IE中，浏览器显示窗口大小只能以下获取：代码如下复制代码

document.body.offsetWidth 
document.body.offsetHeight

Salin selepas log masuk

在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小：代码如下复制代码

document.documentElement.clientWidth 
document.documentElement.clientHeight

Salin selepas log masuk

IE，FF，Safari皆支持该方法，opera虽支持该属性，但是返回的是页面尺寸；
同时，除了IE以外的所有浏览器都将此信息保存在window对象中，可以用以下获取：代码如下复制代码

window.innerWidth 
window.innerHeight

Salin selepas log masuk

整个网页尺寸一般获得方法代码如下复制代码

document.body.scrollWidth 
document.body.scrollHeight

Salin selepas log masuk

屏幕分辨率高度一般获得方法代码如下复制代码

window.screen.height 
window.screen.width

Salin selepas log masuk

总结一下实例

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() 
} 
} 
}

Salin selepas log masuk

IE，FireFox 差异如下：
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

Salin selepas log masuk

另附个人最常用的获取整页宽高的方法（需要jquery框架）代码如下复制代码

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

Salin selepas log masuk

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()); //获取滚动条到左边的垂直宽度

更多js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码相关文章请关注PHP中文网！