博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原生JS获取元素的位置与尺寸
阅读量:7067 次
发布时间:2019-06-28

本文共 912 字,大约阅读时间需要 3 分钟。

1、内高度、内宽度: 内边距 + 内容框
element.clientWidthelement.clientHeight
2、外高度,外宽度: 边框 + 内边距 + 内容框
element.offsetWidthelement.offsetHeight
3、上边框、左边框
element.clientTopelement.clientLeft
4、元素的大小及其相对于视口的位置
element.getBoundingClientRect()//x\y:元素的左上角和父元素左上角的距离//width/height:边框 + 内边距 + 内容框//top:元素的上边界和父元素上边界的距离//left:元素的左边界和父元素左边界的距离//right:元素的右边界和父元素的左边界的距离//bottom:元素的下边界和父元素上边界的距离
5、上边偏移量,左边的偏移量
element.offsetTopelement.offsetLest
6、可视区域的大小
document.documentElement.clientWidthdocument.documentElement.clientHeight
7、页面的实际大小
document.documentElement.scrollWidthdocument.documentElement.scrollHeight
8、窗口左上角 与 屏幕左上角的 距离
window.screenXwindow.screenY
9、屏幕宽高
window.screen.widthwindow.screen.height
10、屏幕可用宽高(去除任务栏)
window.screen.availWidthwindow.screen.availHeight
11、窗口的内高度、内宽度(文档显示区域+滚动条)
window.innerWidthwindow.innerHeight
12、窗口的外高度、外宽度
window.outerWidthwindow.outerHeiht

 

 

转载于:https://www.cnblogs.com/cloud-k/p/7681386.html

你可能感兴趣的文章
IPC通信:Posix消息队列
查看>>
Codeforces Round #279 (Div. 2) A. Team Olympiad 水题
查看>>
小米盒子 作为nas服务器
查看>>
WCF服务实现客户端Cookie共享,表单验证的解决方案
查看>>
Rule Or WorkFlow
查看>>
Unity自动构建
查看>>
Windows Phone 8.1上的开发人员请看
查看>>
BZOJ3118 : Orz the MST
查看>>
UVa 130 - Roman Roulette
查看>>
乌云首届安全峰会
查看>>
数据库操作(ADO)
查看>>
24点经典算法
查看>>
分享一个德州扑克的算法
查看>>
SQL Server2012 创建定时作业——图文并茂,教你轻松快速创建
查看>>
Response.Redirect 打开新窗体的两种方法
查看>>
lua 的 table 处理
查看>>
MyBatis中的#和$的区别
查看>>
DSO、CUBE区别(覆盖、合计)
查看>>
优麒麟(UbuntuKylin)不是国产Linux操作系统
查看>>
java基础篇---I/O技术(一)
查看>>