取得窗口大小 兼容所有浏览器的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保存当前路径(cookies记录)
Dec 14 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
Javascript中For In语句用法实例
May 14 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
原生JS实现飞机大战小游戏
Jun 09 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
Nginx下配置codeigniter框架方法
2015/04/07 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
python之import机制详解
2014/07/03 Python
python中实现php的var_dump函数功能
2015/01/21 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
python动态文本进度条的实例代码
2020/01/22 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
网上商城创业计划书范文
2014/01/31 职场文书
烹调加工管理制度
2014/02/04 职场文书
阳光体育活动方案
2014/02/16 职场文书