浏览器页面区域大小的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 相关文章推荐
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
javascript与有限状态机详解
May 08 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
JS原型与继承操作示例
May 09 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 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
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP文件与目录操作示例
2016/12/24 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
DOM事件探秘篇
2017/02/15 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
应聘美工求职信
2013/11/07 职场文书
早会主持词
2014/03/17 职场文书
商场周年庆活动方案
2014/08/19 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
Nginx实现会话保持的两种方式
2022/03/18 Servers