浏览器页面区域大小的js获取方法


Posted in Javascript onSeptember 21, 2013

浏览器页面区域大小的获取:

//在IE、FireFox、Opera下都可以使用 
document.body.clientWidth 
document.body.clientHeight 
//即可获得,很简单,很方便。 
//而在公司项目当中: 
//Opera仍然使用 
document.body.clientWidth 
document.body.clientHeight 
//可是IE和FireFox则使用 
document.documentElement.clientWidth 
document.documentElement.clientHeight 
//原来是W3C的标准在作怪啊 
//http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
//如果在页面中添加这行标记的话 //在IE中: 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
//在FireFox中: 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
? 
//在Opera中: 
document.body.clientWidth ==> 可见区域宽度 
document.body.clientHeight ==> 可见区域高度 
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽) 
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 
//而如果没有定义W3C的标准,则 
//IE为: 
document.documentElement.clientWidth ==> 0 
document.documentElement.clientHeight ==> 0 
//FireFox为: 
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高) 
//Opera为: 
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Javascript 相关文章推荐
javaScript复制功能调用实现方案
Dec 13 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
Three.js基础部分学习
Jan 08 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
javascript dom追加内容实现示例
Sep 21 #Javascript
html+js实现动态显示本地时间
Sep 21 #Javascript
JavaScript加强之自定义event事件
Sep 21 #Javascript
JavaScript加强之自定义callback示例
Sep 21 #Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 #Javascript
js中的异常处理try...catch使用介绍
Sep 21 #Javascript
使用JS读秒使用示例
Sep 21 #Javascript
You might like
php实现ping
2006/10/09 PHP
PHP_MySQL教程-第一天
2007/03/18 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
一端时间轮换的广告
2006/06/26 Javascript
编辑浪子版表单验证类
2007/05/12 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
Python FTP操作类代码分享
2014/05/13 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
如何在C# winform中异步调用web services
2015/09/21 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
主管职责范文
2013/11/09 职场文书
员工评语大全
2014/01/19 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
开学典礼策划方案
2014/05/28 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers