浏览器页面区域大小的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左侧导航栏和页面选中效果
Aug 21 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python虚拟环境项目实例
2017/11/20 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
PHP中如何创建和修改数组
2012/05/02 面试题
工业学校毕业生自荐信范文
2014/01/03 职场文书
趣味体育活动方案
2014/02/08 职场文书
药学职务聘任书
2014/03/29 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
个人专业技术总结
2015/03/05 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python