取得窗口大小 兼容所有浏览器的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 相关文章推荐
JavaScript中为元素加上name属性的方法
May 09 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
js验证框架实现代码分享
May 18 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
js转换对象为xml
Feb 17 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
解决Vue大括号字符换行踩的坑
Nov 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
layui radio性别单选框赋值方法
2018/08/15 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Keras设置以及获取权重的实现
2020/06/19 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
房产销售经理职责
2013/12/20 职场文书
小学安全教育材料
2014/02/17 职场文书
2015年护士节活动总结
2015/02/10 职场文书
文员岗位职责范本
2015/04/16 职场文书
导游词之无锡古运河
2019/11/14 职场文书
七年级作文之雪景
2019/11/18 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
nginx配置虚拟主机的详细步骤
2021/07/21 Servers