JavaScript获取网页、浏览器、屏幕高度和宽度汇总


Posted in Javascript onDecember 18, 2014

经常发现在写JavaScript的时候,都需要用到网页、浏览器或屏幕的高度和宽度来解决布局定位的问题,时常前用后忘,要不就是在网上search,干脆自己总结一下,这样也方便再次使用,省时省力。

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth (带滚动条宽)
网页正文全文高:document.body.scrollHeight (带滚动条高)
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding 

clientHeight = height + padding 

offsetWidth = width + padding + border 

offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width - border 

clientHeight = height - border 

offsetWidth = width 

offsetHeight = height

总结:关于高度和宽度的东西到是挺多的,具体的有些自己也没有弄懂,通过自己试验了一下,有些得出的值是一样,所以很让人迷惑,只能视情况而定了。

Javascript 相关文章推荐
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
使用ES6语法重构React代码详解
May 09 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 #Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 #Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 #Javascript
使用JS获取当前地理位置方法汇总
Dec 18 #Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 #Javascript
node.js中的fs.chmod方法使用说明
Dec 18 #Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 #Javascript
You might like
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
js事件监听器用法实例详解
2015/06/01 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python表格存取的方法
2018/03/07 Python
python如何读写json数据
2018/03/21 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
python使用列表的最佳方案
2020/08/12 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
安全承诺书范文
2014/03/26 职场文书
路政管理求职信
2014/06/18 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
军训后的感想
2015/08/07 职场文书
python数字转对应中文的方法总结
2021/08/02 Python