浏览器页面区域大小的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 操作select标签实现代码
May 14 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
js指定日期增加指定月份的实现方法
Dec 19 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
js实现九宫格抽奖
Mar 19 Javascript
vue组件开发之slider组件使用详解
Aug 21 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开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
php实现的漂亮分页方法
2014/04/17 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
php实现可运算的验证码
2015/11/10 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python入门篇之条件、循环
2014/10/17 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
Python SQLite3简介
2018/02/22 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
总经理岗位职责
2013/11/09 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android