浏览器页面区域大小的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中Dom的基本操作小结
Jan 23 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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
15种PHP Encoder的比较
2007/03/06 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
python3访问sina首页中文的处理方法
2014/02/24 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
人力资源部培训专员岗位职责
2014/01/02 职场文书
毕业生找工作求职信
2014/08/05 职场文书
销售人员工作自我评价
2014/09/21 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
离婚代理词范文
2015/05/23 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
python基础之文件操作
2021/10/24 Python
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
DQL数据查询语句使用示例
2022/12/24 MySQL