欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

DOM元素尺寸和位置

程序员文章站 2022-06-15 13:56:31
...

offset家族

offsetWidth和offsetHeight:可以获取元素实际大小(width+padding+border)。
可以获取元素的大小,但是不能设置。

box.offsetWidth;
box.offsetHeight;

offsetTop和offsetLeft
可以获取当前元素相对于父元素的位置。

box.offsetLeft;
box.offsetHeight;

PS:如果父盒子中没有设置相对定位的,那么元素就相对于窗口定边的距离

scroll家族

scrollWidth和scrollHeight
可以获取滚动内容的元素大小

box.scrollWidth;
box.scrollHeight;

scrollTop和scrollLeft
获取页面被滚动条卷去的高度和左侧的宽度

box.scrollTop;
box.scrollLeft;

client家族

clientWidth和clientHeight
这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小。(width+padding)

box.clientWidth;
box.clientHeight;

clientLeft和clientTop(完全没用):
就是borderTop与borderLeft


三个家族的区别

  • offset家族用来获取元素自身的大小和位置
  • scroll家族用来获取 元素内容的大小和位置
  • client(客户区、可视区)家族用来获取元素可视区域的大小

  • 偏移offsetWidth: width + padding + border
  • 卷曲scrollWidth: width + padding 不含border
  • 可视clientWidth: width + padding 不包含border

如果内容没有超出盒子范围:clientWidth与scrollWidth相同