js中获取窗口高度的方法|js中获取窗口高度的方法总结

更新时间:2018-09-08    来源:js教程    手机版     字体:

【www.bbyears.com--js教程】

例1

 代码如下

<script   LANGUAGE="JavaScript"> 
var s = "网页可见区域宽 :"+ document.body.clientWidth; 
s += "rn网页可见区域高:"+ document.body.clientHeight;  
s += "rn网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)"; 
s += "rn网页正文全文宽:"+ document.body.scrollWidth; 
s += "rn网页正文全文高:"+ document.body.scrollHeight; 
s += "rn网页被卷去的高:"+ document.body.scrollTop; 
s += "rn网页被卷去的左:"+ document.body.scrollLeft; 
s += "rn网页正文部分上:"+ window.screenTop; 
s += "rn网页正文部分左:"+ window.screenLeft; 
s += "rn屏幕分辨率的高:"+ window.screen.height; 
s += "rn屏幕分辨率的宽:"+ window.screen.width; 
s += "rn屏幕可用工作区高度:"+ window.screen.availHeight; 
s += "rn屏幕可用工作区宽度:"+ window.screen.availWidth; 
alert(s);
</script>

上面只是介绍了一些方法,下面看应用实例

 

 代码如下

/********************
 * 取窗口滚动条滚动高度
 ******************/
function getScrollTop()
{
  var scrollTop=0;
  if(document.documentElement&&document.documentElement.scrollTop)
  {
  scrollTop=document.documentElement.scrollTop;
  }
  else if(document.body)
  {
  scrollTop=document.body.scrollTop;
  }
  return scrollTop;
}
 
/********************
 * 取窗口可视范围的高度
 *******************/

function getClientHeight()
{
  var clientHeight=0;
  if(document.body.clientHeight&&document.documentElement.clientHeight)
  {
  var clientHeight = (document.body.clientHeight   }
  else
  {
  var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
  }
  return clientHeight;
}
 
/********************
 * 取文档内容实际高度
 *******************/

function getScrollHeight()
{
  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}

关于获取各种浏览器可见窗口大小的一点点研究。
在我本地测试当中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight

本文来源:http://www.bbyears.com/wangyezhizuo/44204.html