浏览器页面区域大小的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 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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
图象函数中的中文显示
2006/10/09 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php array_walk() 数组函数
2011/07/12 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
php注册登录系统简化版
2020/12/28 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
vue实现购物车列表
2020/06/30 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
Linux Interview Questions For software testers
2013/05/17 面试题
小学生自我评价范例
2013/09/24 职场文书
科室工作个人总结的自我评价
2013/10/29 职场文书
护士专业推荐信
2013/11/02 职场文书
大学四年个人自我小结
2014/03/05 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
服务质量承诺书
2014/03/27 职场文书
2015年质检工作总结
2015/05/04 职场文书
孝女彩金观后感
2015/06/10 职场文书
初中数学教学随笔
2015/08/15 职场文书
python删除csv文件的行列
2021/04/06 Python
基于angular实现树形二级表格
2021/10/16 Javascript