JavaScript笔记之offset,client,scroll

317 阅读1分钟

1.offset偏移量

offset即偏移量,该属性可以动态获取该元素的位置(偏移)、大小等。

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

offset与style的区别

offset

  • offset 可以得到任意样式表中的样式值

  • offset 系列获得的数值是没有单位的

  • offsetWidth 包含padding+border+width

  • offsetWidth 等属性是只读属性,只能获取不能赋值

  • 要获取元素大小位置,用offset更合适

style

  • style 只能得到行内样式表中的样式值

  • style.width 获得的是带有单位的字符串

  • style.width 获得不包含padding和border 的值

  • style.width 是可读写属性,可以获取也可以赋值

  • 想要给元素更改值,则需要用style改变

元素可视区client

client 即客户端,使用 client 的相关属性来获取元素可视区的相关信息。通过 client 的相关属性可以动态的得到该元素的边框大小、元素大小等。

元素滚动scroll

scroll即滚动,使用scroll的相关属性可以动态得到钙元素的大小、滚动距离等。

  • window.pageYOffset相当于scrollTop
  • window.pageXOffset相当于scrollLeft 如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。

区别

1.offset系列 经常用于获得元素位置    offsetLeft  offsetTop

2.client经常用于获取元素大小  clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop  scrollLeft  

4.注意页面滚动的距离通过 window.pageXOffset  获得