JS | getBoundingClientRect()方法的基本使用

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。

width / x：元素矩形的宽度
height / y：元素矩形的高度
top：元素矩形顶部到页面顶部的距离
right：元素矩形右侧到页面左侧的距离
bottom: 元素矩形底部到页面顶部的距离
left：元素矩形左侧到页面左侧的距离

如果是正常的盒子模型，宽/高是 width / height + padding + border 的总和
但如果盒子模型为 border-box，那盒子的宽 / 高就是 width / height 了

posted @ 2022-09-05 00:32 如是。阅读(180) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS实现水平垂直居中的方式汇总

· JavaScript中Array.from()方法的用法

· getBoundingClientRect

· Element.getBoundingClientRect()

· 前端好用API之getBoundingClientRect

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

如是。