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之引用类型介绍
Aug 10 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 Javascript
jQuery实现本地存储
Dec 22 jQuery
JavaScript实现雪花飘落效果
Dec 27 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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
SONY SRF-40W电路分析
2021/03/02 无线电
微信access_token的获取开发示例
2015/04/16 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
在Javascript中 声明时用"var"与不用"var"的区别
2013/04/15 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python自动格式化json文件的方法
2015/03/11 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
python 字段拆分详解
2019/12/17 Python
pymysql的简单封装代码实例
2020/01/08 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
音乐教育感言
2014/03/05 职场文书
销售提升方案
2014/06/07 职场文书
2014年教研工作总结
2014/12/06 职场文书
2014年审计人员工作总结
2014/12/19 职场文书