PC端网页特效-元素偏移量 offset 系列

PC端网页特效—元素偏移量 offset 系列

1.offset概述

​ offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小(宽度高度)
  • 注意:返回的数值都不带单位

2.offset系列常用属性:

3.offset 与 style 区别

offset

  • offset 可以得到任意样式表中的样式
  • offset 系列获得的数值是没有单位
  • offsetWidth 包含padding+ border +width
  • offsetWidth 等属性是只读属性,只能获取不能赋值
  • 所以,我们想要获取元素大小位置,用offset更合适

style

  • style 只能得到行内样式表中的样式值
  • style.width 获得的是带有单位的字符串
  • style.width 获得不包含 padding 和 border 的值
  • style.width 是可读写属性,可以获取也可以赋值
  • 所以,我们想要给元素更改值,则需要用 style 改变

三大系列总结:https://www.cnblogs.com/chichi0002/p/16886351.html
scroll系列:https://www.cnblogs.com/chichi0002/p/16886347.html
client系列:https://www.cnblogs.com/chichi0002/p/16884079.html

posted @ 2022-09-26 10:15  chichi0002  阅读(40)  评论(0编辑  收藏  举报