PC端网页特效

1.元素偏移量  offset 系列

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

 注意:

  1.获得元素距离带有定位父元素的位置

  2.获得元素自身的大小(宽度和高度)

  3.返回的数值都不带单位

 1.2 offset 系列常用属性(元素以带有定位的父亲为准,如果没有父亲,或者父亲没有定位,则以 body 为准)

  element.offsetTop    返回元素相对带有定位父元素上方的偏移

  element.offsetLeft     返回元素相对带有定位父元素左边框的偏移

  element.ofsetParent    返回作为该元素带有定位的父级元素  如果父级都没有定位则返回 body

  element.offsetWidth       返回自身包括 padding、边框、内容区的宽度,返回数值不带单位

  element.offsetHeight      返回自身包括 padding、边框、内容区的高度,返回数值不带单位

区别:offsetParent  返回带有定位的父亲,否则返回body,

   parentNode   返回父亲  是最近一级的父亲  亲爸爸  不管父亲有没有定位

 1.3 offset 和 style 的区别

  offset 可以得到任意样式表中的样式值,style 只能得到行内样式表中的样式值

  offset 系列获得的数值是没有单位的,style.width 获得的是带有单位的字符串

  offsetWidth 包含 padding + border + width,style.width  获得不包含 padding + border 的值

  offsetWidth 等属性是只读属性,只能获取不能赋值,style.width 是可读写属性,可以获取也可以赋值

  想要获取元素大小位置,使用 offset 更合适,想要给元素更改值,需要用 style 改变

猜你喜欢

转载自www.cnblogs.com/qtbb/p/11695886.html