夏日博客

A-A+

js中取得窗口位置与窗口大小代码

2016年02月16日 前端设计 暂无评论 阅读 7 views 次

下面我来介绍兼容所有浏览器的取得窗口位置与窗口大小代码，有需要的朋友可参考。

取得窗口大小,代码如下:

  1. var pageWidth = window.innerWidth,  
  2. var pageHeight = window.innerHeight;  
  3. if(typeof pageWidth != "number"){  
  4. if(document.compatMode == "number"){  
  5. pageWidth = document.documentElement.clientWidth;  
  6. pageHeight = document.documentElement.clientHeight;  
  7. }else{  
  8. pageWidth = document.body.clientWidth;  
  9. pageHeight = document.body.clientHeight;  
  10. }  
  11. }  

我们首先把window.innerWidth和window.innerHeight的值分别付给了pageWidth和pageHeight。然后检查pageWidth中保存的是不是一个数值；如果不是，则通过document.compatMode来确定页面是否处于标准模式。如果是，则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否则，就使用document.body.clientWidth和document.body.clientHeight的值。

取得窗口位置,代码如下:

  1. var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;  
  2. var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;  

这两个例子目的是取得窗口左边和上边的位置，首先运用二元操作符判断screenLeft属性和screenTops属性是否存在，如果存在（在IE、Safari、Opera和Chrome中），则取这两个属性的值。如果不存在（在Firefox中），则取screenX和screenY的值。

标签：

给我留言