浏览器页面区域大小的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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
js跑步算法的实现代码
Dec 04 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
基于postman获取动态数据过程详解
Sep 08 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 常用的系统函数
2017/02/07 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python使用pandas实现数据分割实例代码
2018/01/25 Python
Python 面试中 8 个必考问题
2018/11/16 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
一套Delphi的笔试题二
2013/05/11 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
校园新闻广播稿
2014/01/10 职场文书
单位成立周年感言
2014/01/26 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS