取得窗口大小 兼容所有浏览器的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 学习笔记 选择器之三
Jul 23 Javascript
javascript数组去掉重复
May 12 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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实现数据库随机重排实例
2014/10/17 PHP
PHP安全下载文件的方法
2016/04/07 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python提取页面内url列表的方法
2015/05/25 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python实现ftp文件传输功能
2020/03/20 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
个人自我鉴定
2013/11/07 职场文书
军训学生自我鉴定
2014/02/12 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书