获取JS中网页各种高宽与位置的方法总结


Posted in Javascript onJuly 27, 2016

screen对象

获取屏幕的高宽(分辨率)

screen.width     //屏幕的宽
screen.height    //屏幕的高
screen.availWidth  //屏幕可用宽度  屏幕的像素高度减去系统部件高度之后的值
screen.availHeight  //屏幕可用高度  屏幕的像素宽度减去系统部件宽度之后的值

window对象

获得窗口位置及大小

window.screenTop   //窗口顶部距屏幕顶部的距离
window.screenLeft  //窗口左侧距屏幕左侧的距离
window.innerWidth  //窗口中可视区域(viewpoint)的宽度
  alert(window.innerWidth); //chrome 1366 ff 1366 ie 1366
window.innerHeight  //窗口中可视区域(viewpoint)的高度 该值与浏览器是否显示菜单栏等因素有关
  alert(window.innerHeight); //chrome 643 ff 657 ie 673
window.outerWidth  //浏览器窗口本身的宽度(可视区域宽度+浏览器边框宽度)
  alert(window.outerWidth); //chrome 1366 ff 1382 ie 1382 
  //说明chrome在最大化时浏览器窗口没有边框宽度,非最大化时有8px边框
  //ff和ie上下左右有8px的边框宽度
window.outerHeight  //浏览器窗口本身的高度
  alert(window.outerHeight); //chrome 728 ff 744 ie 744

element对象

在介绍element对象各种高宽之前有必要解释一下盒模型
默认盒模型 box-sizing:content-box;

获取JS中网页各种高宽与位置的方法总结

boxWidth = 2*margin + 2*border + 2*padding + width
boxHeight = 2*margin + 2*border + 2*padding + height

当不出现滚动条时

body{margin:0;}
#demo{
  width:100px;
  height:100px;
  padding:10px;
  border:20px;
  margin:30px;
  background-color:red;
}
<div id="demo">123456789 123456789</div>

clientWidth:在页面上返回内容的可视宽度(不包括边框,边距或滚动条)

clientHeight:在页面上返回内容的可视高度(不包括边框,边距或滚动条)

clientWidth = 2*padding + width - scrollbarWidth   
console.log(document.getElementById('demo').clientWidth); //120 此时scrollbarWidth=0
clientHeight = 2*padding + height - scrollbarHeight 
console.log(document.getElementById('demo').clientHeight); //120 此时scrollbarWidth=0

offsetWidth:返回元素的宽度包括边框和填充,但不包括边距

offsetHeight:返回元素的高度包括边框和填充,但不包括边距

offsetWidth = 2*border + 2*padding + width 
console.log(document.getElementById('demo').offsetWidth)  //160
offsetHeight = 2*border + 2*padding + height 
console.log(document.getElementById('demo').offsetHeight)  //160

offsetLeft: 获取对象相对于版面或由 offsetLeft属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop属性指定的父坐标的计算顶端位置

console.log(document.getElementById('demo').offsetLeft)  //30
console.log(document.getElementById('demo').offsetTop)  //30

获取JS中网页各种高宽与位置的方法总结

当出现滚动条时

body{
  margin:0;
  padding:20px;
  width:1000px;
  height:500px;
}
<div id="demo">123456789123456789</div>

scrollWidth: 返回元素的整个宽度(包括带滚动条的隐蔽的地方)

scrollHeight: 返回整个元素的高度(包括带滚动条的隐蔽的地方)

scrollWidth = 2*padding + width  
console.log(document.body.scrollWidth)  //1040
scrollHeight = 2*padding + width  
console.log(document.body.scrollHeight)  //540

scrollTop: 向下滑动滚动块时元素隐藏内容的高度。不设置时默认为0,其值随着滚动块滚动而变化

scrollLeft: 向右滑动滚动块时元素隐藏内容的宽度。不设置时默认为0,其值随着滚动块滚动而变化

event对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

event.pageX:相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的水平距离(IE8不支持)

event.pageY:相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的垂直距离(IE8不支持)

event.clientX:相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离

event.clientY:相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离

event.screenX:相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的水平距离

event.screenY:相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的垂直距离

event.offsetX:相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离

event.offsetY:相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离

获取JS中网页各种高宽与位置的方法总结

总结

以上就是获取JS中网页各种高宽与位置的方法总结,对大家学习JS的时候提供了方便,有需要的小伙伴们可以参考学习。

Javascript 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
vue-axios使用详解
May 10 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 #Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 #Javascript
详解Angular开发中的登陆与身份验证
Jul 27 #Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 #Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 #Javascript
AngularJS 指令详细介绍
Jul 27 #Javascript
js中遍历Map对象的方法
Jul 27 #Javascript
You might like
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
分享vim python缩进等一些配置
2018/07/02 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
python安装sklearn模块的方法详解
2020/11/28 Python
历史专业个人求职信分享
2013/12/20 职场文书
初中英语课后反思
2014/04/25 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
经营场所使用证明
2015/06/19 职场文书
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers