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学习笔记6 prototype的提出
Jan 11 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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封装的mysqli类完整实例
2016/10/18 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
js简单抽奖代码
2015/01/16 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python3中详解fabfile的编写
2018/06/24 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
Python bisect模块原理及常见实例
2020/06/17 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
现金会计岗位职责
2013/12/05 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
学习型党组织心得体会
2014/09/12 职场文书
公司总经理岗位职责
2015/04/01 职场文书