js获取浏览器客户区尺寸代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了实时获取浏览器客户区尺寸的功能。

当你在调整浏览器大小的时候,也能够精确的获取。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>前端教程网</title>
<script>
//获取屏幕宽度并动态赋值  
var winWidth = 0;
var winHeight = 0;
function findDimensions(){
  //获取窗口宽度
  if (window.innerWidth){
    winWidth = window.innerWidth;
  }
  else if ((document.body) && (document.body.clientWidth)){
    winWidth = document.body.clientWidth;
  }
  //获取窗口高度
  if (window.innerHeight){
    winHeight = window.innerHeight;
  }
  else if ((document.body) && (document.body.clientHeight)){
    winHeight = document.body.clientHeight;
  }
  //通过深入Document内部对body进行检测,获取窗口大小
  if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){
    winHeight = document.documentElement.clientHeight;
    winWidth = document.documentElement.clientWidth;
  }
  //结果输出至两个文本框
  
  document.body.innerHTML=(winHeight)+"<br/>"+winWidth;
}
//调用函数,获取数值
window.onresize=findDimensions;
window.onload=function(){
  findDimensions();
}
</script>
</head>
<body>
</body>
</html>

回复

我来回复
  • 暂无回复内容