offerset与client
获得元素宽高
属性名:clientWidth和clientHeight
使用场景:获取元素的可见部分宽高:内容 + padding(不包含边框,margin,滚动条等)
属性名:offsetWidth和offsetHeight
使用场景:获取元素的自身宽高,包含元素自身设置的宽高、padding、border
注意
- 获取出来的是数值,方便计算
- 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
- 以上两种属性只能获取,不能设置
- 获取页面宽高,通常使用clientWidth和clientHeight,获取元素宽高,通常使用:offsetWidth和offsetHeight
<style> div { width: 200px; height: 200px; padding: 10px; margin: 10px; border: 10px solid #000; } </style>
<div></div> <script> const div = document.querySelector('div') div.style.width // 获取宽高 // 获取页面宽高使用clientWidth // clientWidth:包含:内容宽 + padding console.log(div.clientWidth,div.clientHeight) // offsetWidth:包含:内容宽 + padding + border // 获取元素宽高:offsetWidth console.log(div.offsetWidth,div.offsetHeight) </script>
获取位置
属性名:offsetLeft和offsetTop
使用场景:获取元素距离自己定位父级元素的左、上距离,参照定位元素的位置距离
方法名:getBoundingClientRect
语法:element.getBoundingClientRect()
返回值:元素的大小及其相对于可视窗口/浏览器的位置
<div></div> <script> const div = document.querySelector('div') // 大小位置 // 参照浏览器窗口/可视窗口 console.log(div.getBoundingClientRect()) /* x: 10 y: 10 width: 240 内容+padding+border height: 240 top: 10 right: 250 元素右边距离窗口左边的距离 bottom: 250 left: 10 */ </script>
注意:
- offsetLeft和offsetTop 注意是只读属性,只能获取,不能设置
- offsetLeft和offsetTop 以带有定位的父级为参考坐标,如果上级中都没有定位则以文档左上角 为准
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性