浏览器页面区域大小的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 ready函数滥用分析
Feb 16 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
使用Typescript和ES模块发布Node模块的方法
May 25 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+ajax实现的点击浏览量加1
2015/04/16 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
Vue配置marked链接添加target="_blank"的方法
2019/07/19 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
学校招生宣传广告词
2014/03/19 职场文书
2014年冬季防火方案
2014/05/21 职场文书
网站推广策划方案
2014/06/04 职场文书
我是特种兵观后感
2015/06/11 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle