网站地图    收藏   

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 在js中获取窗口高度的方法很简单我们只要基于document.body.就可以计算出各种高度了,下面我先来给大家看一个实例。...

例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<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.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

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论