取得窗口大小 兼容所有浏览器的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实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
Vue watch响应数据实现方法解析
Jul 10 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python正则表达式面试题解答
2020/04/28 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
python定义类self用法实例解析
2020/01/22 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
教师求职信范文分享
2013/12/27 职场文书
绿色城市实施方案
2014/03/19 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
年终考核实施方案
2014/05/26 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
给老婆道歉的话
2015/01/20 职场文书
孙振耀退休感言
2015/08/01 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS