取得窗口大小 兼容所有浏览器的js代码


Posted in Javascript onAugust 09, 2011

取得窗口大小的代码:

var pageWidth = window.innerWidth, 
var pageHeight = window.innerHeight; 
if(typeof pageWidth != "number"){ 
if(document.compatMode == "number"){ 
pageWidth = document.documentElement.clientWidth; 
pageHeight = document.documentElement.clientHeight; 
}else{ 
pageWidth = document.body.clientWidth; 
pageHeight = document.body.clientHeight; 
} 
}

我们首先把window.innerWidth和window.innerHeight的值分别付给了pageWidth和pageHeight。然后检查pageWidth中保存的是不是一个数值;如果不是,则通过document.compatMode来确定页面是否处于标准模式。如果是,则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的值。否则,就使用document.body.clientWidth和document.body.clientHeight的值。
取得窗口位置的代码:
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; 
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
 
这两个例子目的是取得窗口左边和上边的位置,首先运用二元操作符判断screenLeft属性和screenTops属性是否存在,如果存在(在IE、Safari、Opera和Chrome中),则取这两个属性的值。如果不存在(在Firefox中),则取screenX和screenY的值。
Javascript 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
javascript中数组方法汇总
Jul 07 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
js和jquery中获取非行间样式
May 05 jQuery
Vue2路由动画效果的实现代码
Jul 10 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 #Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 #Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 #Javascript
用JS判断IE版本的代码 超管用!
Aug 09 #Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 #Javascript
js 分页全选或反选标识实现代码
Aug 09 #Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 #Javascript
You might like
php+mysql分页代码详解
2008/03/27 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
Python实现处理管道的方法
2015/06/04 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
关于赌博的检讨书
2014/01/08 职场文书
面试后的英文感谢信
2014/02/01 职场文书
材料会计岗位职责
2014/03/06 职场文书
企业金融服务方案
2014/06/03 职场文书
社区两委对照检查材料
2014/08/23 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
教你用python实现12306余票查询
2021/06/30 Python
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android