获取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 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
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仿discuz分页效果代码
2008/10/02 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
python读取word文档的方法
2015/05/09 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
销售业务实习自我鉴定
2013/09/23 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
讲文明倡议书
2015/04/29 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
最美乡村教师观后感
2015/06/11 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
python绘制箱型图
2021/04/27 Python
Python 全局空间和局部空间
2022/04/06 Python
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android