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 相关文章推荐
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
vue实现顶部菜单栏
Nov 08 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
php的socket编程详解
2016/11/20 PHP
Yii2中datetime类的使用
2016/12/17 PHP
YII框架http缓存操作示例
2019/04/29 PHP
JavaScript 创建对象
2009/07/17 Javascript
jQuery 白痴级入门教程
2009/11/11 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
jQuery链使用指南
2015/01/20 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
公司年会抽奖活动主持词
2014/03/31 职场文书
实习评语大全
2014/04/26 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
党支部培养考察意见
2015/06/02 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python