浏览器页面区域大小的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 相关文章推荐
IE下js调试工具Companion.JS
Oct 15 Javascript
ExtJS 入门
Oct 29 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
js实现简单商品筛选功能
Feb 02 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下MYSQL limit的优化
2008/01/10 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
twig模板常用语句实例小结
2016/02/04 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
Node.js 回调函数实例详解
2017/07/06 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
Python项目跨域问题解决方案
2020/06/22 Python
python excel和yaml文件的读取封装
2021/01/12 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
出生公证委托书
2014/04/03 职场文书
关于环保的建议书
2014/05/12 职场文书
电子工程求职信
2014/07/17 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
复兴之路展览观后感
2015/06/02 职场文书