原生JS获取元素的位置与尺寸实现方法
1、内高度、内宽度： 内边距 + 内容框
clientWidth
clientHeight
2、外高度，外宽度： 边框 + 内边距 + 内容框
offsetWidth
offsetHeight
3、上边框、左边框
clientTop
clientLeft
4、元素的大小及其相对于视口的位置
getBoundingClientRect()
//x\y:元素的左上角和父元素左上角的距离
//width/height:边框 + 内边距 + 内容框
//top:元素的上边界和父元素上边界的距离
//left:元素的左边界和父元素左边界的距离
//right:元素的右边界和父元素的左边界的距离
//bottom:元素的下边界和父元素上边界的距离
5、上边偏移量，左边的偏移量
offsetTop
offsetLest
6、可视区域的大小
document.documentElement.clientWidth
document.documentElement.clientHeight
7、页面的实际大小
document.documentElement.scrollWidth
document.documentElement.scrollHeight
8、窗口左上角 与 屏幕左上角的 距离
window.screenX、
window.screenY
9、屏幕宽高
window.screen.width
window.screen.height
10、屏幕可用宽高（去除任务栏）
window.screen.availWidth
window.screen.availHeight
11、窗口的内高度、内宽度（文档显示区域+滚动条）
window.innerWidth
window.innerHeight
12、窗口的外高度、外宽度
window.outerWidth
window.outerHeiht
以上这篇原生JS获取元素的位置与尺寸实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS仿Windows开机启动Loading进度条的方法,实例分析了javascript操作html元素及对应样式实现特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
今天硬着头皮去搞一段混淆过的js代码，因为源码丢了。。。 本来打算要在js引擎那一层去获取代码的，发现根本不需要。2009-01-01
再用织梦建站的时候，常常需要要在列表页添加前两天的文章后面添加个new小图片，那么此功能是怎么实现的呢，下面通过本文给大家详解dedecms为文章添加HOT NEW标志图片，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了微信小程序列表埋点曝光指南，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
有时候我们需要在用户进入页面的时候，自动最大化，更好的体验，省去用户点击最大化按钮，很多文章内容网站都加了这个代码2013-05-05
这篇文章主要介绍了JS关闭子窗口并且刷新上一个窗口的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要为大家详细介绍了js实现拾色器插件ColorPicker，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
本篇文章主要介绍了原生js实现简单的Ripple按钮实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了JS eval代码快速解密实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
最近因为工作需要,搭建了一个加班打卡的小程序,下面这篇文章主要给大家介绍了关于uniapp微信小程序打卡功能的详细实现流程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
最新评论