获取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 相关文章推荐
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
jquery实现上传图片功能
Jun 29 jQuery
快速解决element的autofocus失效问题
Sep 08 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
php实现监听事件
2013/11/06 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
django从后台返回html代码的实例
2020/03/11 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
详解python tcp编程
2020/08/24 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
化学相关工作求职信
2013/10/02 职场文书
安全生产检查通报
2014/01/29 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
2014年创卫工作总结
2014/11/24 职场文书
联欢会开场白
2015/06/01 职场文书
投诉信回复范文
2015/07/03 职场文书
节水宣传标语口号
2015/12/26 职场文书
节约用水广告语60条
2019/11/14 职场文书
css样式important规则的正确使用方式
2022/06/10 HTML / CSS