取得窗口大小 兼容所有浏览器的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 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
node.js基础知识小结
Feb 26 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
js实现蒙版效果
Jan 11 Javascript
JS中==、===你分清楚了吗
Mar 04 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 ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Django如何使用redis作为缓存
2020/05/21 Python
python如何随机生成高强度密码
2020/08/19 Python
Python操作Excel的学习笔记
2021/02/18 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
某科技软件测试面试题
2013/05/19 面试题
北大青鸟学生求职信
2013/09/24 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
求职导师推荐信范文
2015/03/27 职场文书
个人承诺书格式范文
2015/04/29 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android
改造DE1103三步曲
2022/04/07 无线电
MySQL 数据表操作
2022/05/04 MySQL
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电