取得窗口大小 兼容所有浏览器的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幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
javascript与有限状态机详解
May 08 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
js简单时间比较的方法
Aug 02 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
微信小程序排坑指南详解
May 23 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
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中静态类与静态变量用法的区别分析
2015/01/15 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python 装饰器深入理解
2017/03/16 Python
详解python之配置日志的几种方式
2017/05/22 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python如何使用函数做字典的值
2019/11/30 Python
django框架auth模块用法实例详解
2019/12/10 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
python编程的核心知识点总结
2021/02/08 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
shell程序中如何注释
2012/01/28 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
Java软件工程师综合面试题笔试题
2013/09/08 面试题
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
小组口号大全
2014/06/09 职场文书
党性分析材料格式
2014/12/19 职场文书
汽车销售合同文本
2019/08/08 职场文书