offerset与client

获得元素宽高

属性名:clientWidth和clientHeight

使用场景:获取元素的可见部分宽高:内容 + padding(不包含边框,margin,滚动条等)

client

属性名:offsetWidth和offsetHeight

使用场景:获取元素的自身宽高,包含元素自身设置的宽高、padding、border

元素尺寸

注意

  1. 获取出来的是数值,方便计算
  2. 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
  3. 以上两种属性只能获取,不能设置
  4. 获取页面宽高,通常使用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>

注意:

  1. offsetLeft和offsetTop 注意是只读属性,只能获取,不能设置
  2. offsetLeft和offsetTop 以带有定位的父级为参考坐标,如果上级中都没有定位则以文档左上角 为准

元素尺寸与位置属性

posted @   丫丫learning  阅读(131)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示