js/jquery获取浏览器窗口的可视区域高度和宽度,滚动条高度

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。

IE中，浏览器显示窗口大小只能以下获取：

代码如下	复制代码
document.body.offsetWidth  document.body.offsetHeight

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

代码如下	复制代码
document.documentElement.clientWidth  document.documentElement.clientHeight

IE，FF，Safari皆支持该方法，opera虽支持该属性，但是返回的是页面尺寸；

同时，除了IE以外的所有浏览器都将此信息保存在window对象中，可以用以下获取：

代码如下	复制代码
window.innerWidth  window.innerHeight

整个网页尺寸一般获得方法

代码如下	复制代码
document.body.scrollWidth document.body.scrollHeight

屏幕分辨率高度一般获得方法

代码如下	复制代码
window.screen.height window.screen.width

总结一下实例

 

代码如下

复制代码

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

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

另附个人最常用的获取整页宽高的方法（需要jquery框架）

代码如下	复制代码
$(document).width() < $('body').width() ? $(document).width() : $('body').width(); $(document).height() < $('body').height() ? $(document).height() : $('body').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()); //获取滚动条到左边的垂直宽度