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 相关文章推荐
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
原生js简单实现放大镜特效
May 16 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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横向重复区域显示二法
2008/09/25 PHP
php适配器模式介绍
2012/08/14 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
利用Python破解斗地主残局详解
2017/06/30 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
Python单元测试与测试用例简析
2019/11/09 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
上海中网科技笔试题
2012/02/19 面试题
单位在职证明范本
2014/01/09 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
就业意向书范文
2014/04/01 职场文书
爱情保证书大全
2014/04/29 职场文书
政工例会汇报材料
2014/08/26 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2014年医务科工作总结
2014/12/18 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
python flask开发的简单基金查询工具
2021/06/02 Python