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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
React父子组件间的传值的方法
Nov 13 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 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中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
ktv收银员岗位职责
2013/12/16 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
触摸春天教学反思
2014/02/03 职场文书
学校财务管理制度
2015/08/04 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
vue中data里面的数据相互使用方式
2022/06/05 Vue.js