原生JS获取元素的位置与尺寸实现方法


Posted in Javascript onOctober 18, 2017

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获取元素的位置与尺寸实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中switch case循环实例代码
Dec 30 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
javascript对象的创建和访问
Mar 08 Javascript
PHP7新特性简述
Jun 11 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
在vue 中使用 less的教程详解
Sep 26 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 #Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 #Javascript
详解http访问解析流程原理
Oct 18 #Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 #Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 #Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 #Javascript
基于JavaScript表单脚本(详解)
Oct 18 #Javascript
You might like
PHP&MYSQL服务器配置说明
2006/10/09 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
Python使用Scrapy爬取妹子图
2015/05/28 Python
python遍历目录的方法小结
2016/04/28 Python
Python列表切片操作实例总结
2019/02/19 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
Python初学者常见错误详解
2019/07/02 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
python实现图片素描效果
2020/09/26 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
体育教师自荐信范文
2013/12/16 职场文书
教师的实习自我鉴定
2013/12/17 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
意向协议书
2015/01/27 职场文书
学习经验交流会总结
2015/11/02 职场文书
汽车销售合同文本
2019/08/08 职场文书
关于python中模块和重载的问题
2021/11/02 Python