浏览器页面区域大小的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 相关文章推荐
JavaScript中split() 使用方法汇总
Apr 17 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
python实现计算图形面积
2021/02/22 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
化工机械应届生求职信
2013/11/04 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
2014年工会工作总结
2014/11/12 职场文书
党员自评材料范文
2014/12/17 职场文书
失职检讨书大全
2015/01/26 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python
python井字棋游戏实现人机对战
2022/04/28 Python