JS中的offsetTop、clientTop、scrollTop等属性详解

7,460 阅读1分钟

offset系列

  • offsetTop、offsetLeft
  1. offsetTop:元素到offsetParent顶部的距离
  2. offsetParent:距离元素最近的一个具有定位的祖宗元素(relative,absolute,fixed),若祖宗都不符合条件,offsetParent为body。
  3. offsetLeft: 同上
  • offsetWidth、offsetHeight
  1. offsetWidth = width + 左右padding + 左右boder
  2. offsetHeight = height + 上下padding + 上下boder
  • offsetX、offsetY
  1. event.offsetX 相对容器的水平坐标
  2. event.offsetY 相对容器的垂直坐标

client系列

  • clientWidth、clientHeight
  1. clientWidth = width+左右padding
  2. clientHeigh = height + 上下padding
  • clientTop、clientLeft
  1. clientTop = boder.top(上边框的宽度)
  2. clientLeft = boder.left(左边框的宽度)
  • clientX、clientY
  1. clientX: 相对文档的水平坐标
  2. clientY: 相对文档的垂直坐标

scroll系列

  • scrollWidth、scrollHeight

scrollWidth:获取指定标签内容层的真实宽度(可视区域宽度+被隐藏区域宽度) scrollHeight:获取指定标签内容层的真实高度(可视区域高度+被隐藏区域高度)

  • scrollTop、scrollLeft

scrollTop: 内容层顶部 到 可视区域顶部的距离
scrollLeft: 内容层左端 到 可视区域左端的距离