取得窗口大小 兼容所有浏览器的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 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 Javascript
如何在JavaScript中正确处理变量
Dec 25 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数组循环操作详细介绍 附实例代码
2013/02/03 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
PHP7变量处理机制修改
2021/03/09 PHP
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Python实现代码块儿折叠
2020/04/15 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
法学专业本科生自荐信范文
2013/12/17 职场文书
七年级英语教学反思
2016/02/15 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python