Offset | OneYoung's Blog

本文主要用来探讨与页面距离、元素大小相关的属性。

TIP

提前声明：本文中 element 指代的是元素节点，event 指代的是事件对象。

1.offset

element.offsetWidth 元素的自身宽度。
element.offsetHeight 元素的自身高度。
element.offsetParent 元素的参考父元素(离元素最近的含有定位信息的祖先元素即 position 为 relative、absolute 或者 fixed)
element.offsetTop 元素距离参考父元素顶部的距离。
element.offsetLeft 元素距离参考父元素左侧的距离。
event.offsetX 鼠标相对于参考父元素的X轴坐标。
event.offsetY 鼠标相对于参考父元素的Y轴坐标。

2.client

element.clientWidth 元素可视尺寸的宽度。
element.clientHeight 元素可视尺寸的高度。
event.clientX 相对于浏览器的可视窗口(不包含浏览器顶部tab 书签等区域)的X轴坐标。
event.clientY 相对于浏览器的可视窗口(不包含浏览器顶部tab 书签等区域)的Y轴坐标。

TIP

元素可视尺寸，包括 padding，但不包括 border、margin以及滚动条。

3.screen

event.screenX 相对于浏览器的完整窗口(包含浏览器顶部tab 书签等区域)的X轴坐标。
event.screenY 相对于浏览器的完整窗口(包含浏览器顶部tab 书签等区域)的Y轴坐标。

4.page

event.pageX 相对于整个页面(也可以看做相对整个 document)的X轴坐标。
event.pageY 相对于整个页面(也可以看做相对整个 document)的Y轴坐标。

5.scroll

element.scrollWidth 元素可滚动宽度。
element.scrollHeight 元素可滚动高度。
element.scrollTop 元素距离容器顶部的滚动距离。
element.scrollLeft 元素距离容器左侧的滚动距离。

6.浏览器屏幕尺寸

分为两类，前者与浏览器是否缩放无关，后者与浏览器是否缩放相关。另外这里只标注下 height高度，width 宽度同理。

window.screen.height 与屏幕分辨率相关，只读属性，返回整个屏幕的宽高。
window.screen.availHeight 浏览器的可用高度（我测试的结果是包含了操作栏但google时说此属性不包含操作栏）。
window.innerHeight 不包含顶部操作栏的浏览器高度。
window.outerHeight 包含顶部操作栏的浏览器高度。

ps.例子代码

写了个小例子，方便后面回顾。传送门

具体的 js 代码如下：

window.onload = function () {
  function $(selector) {
    return document.querySelector(selector)
  }
  const { log } = console
  const parent = $('.parent')
  const child = $('.child')
  const c = $('.content')

  /* 1.offset */ 
  // 元素自身宽度 400
  log('offsetWidth', c.offsetWidth)
  // 元素自身高度 800
  log('offsetHeight', c.offsetHeight)

  // 元素的参考父元素 (离元素最近的含有定位信息的祖先元素 即position为relative、absolute或者fixed) 'parent element'
  log('offsetParent', c.offsetParent)
  // 元素距离参考父元素顶部的距离 150
  log('offsetTop', c.offsetTop)
  // 元素距离参考父元素左侧的距离 150
  log('offsetLeft', c.offsetLeft)
  
  /* 2.client */ 
  // 元素可视尺寸（包括padding 但不包括border、margin以及滚动条）
  log('clientWidth', c.clientWidth)
  log('clientHeight', c.clientHeight)

  /* 3.scroll */
  // 元素可滚动宽度
  log('scrollWidth', c.scrollWidth)
  // 元素可滚动高度
  log('scrollHeight', c.scrollHeight)
  // 元素距离容器顶部的距离
  log('scrollTop', c.scrollTop)
  // 元素距离容器左侧的距离
  log('scrollLeft', c.scrollLeft)

  // mouseEvent 鼠标位置
  c.onclick = function (e) {
    // 相对于参考父元素
    log('offsetX', e.offsetX)
    log('offsetY', e.offsetY)
    // 相对于浏览器的可视窗口(不包含浏览器顶部tab 书签等区域)
    log('clientX', e.clientX)
    log('clientY', e.clientY)
    // 相对于整个页面
    log('pageX', e.pageX)
    log('pageY', e.pageY)
    // 相对于浏览器的完整窗口(包含浏览器顶部tab 书签等区域)
    log('screenX', e.screenX)
    log('screenY', e.screenY)
  }

  /* ps: 其他尺寸 */
  // 屏幕尺寸 该属性与浏览器是否全屏无关
  log('screen.height', window.screen.height) // 屏幕分辨率相关
  
  // 这三属性与浏览器是否全屏相关
  log('screen.availHeight', window.screen.availHeight) // 浏览器的可用高度（我测试的结果 是包含了操作栏 但google时说此属性不包含操作栏）
  log('window.innerHeight', window.innerHeight) // 不包含顶部操作栏
  log('window.outterHeight', window.outerHeight) // 包含顶部操作栏
}

1.offset ​

2.client ​

3.screen ​

4.page ​

5.scroll ​

6.浏览器屏幕尺寸 ​

ps.例子代码 ​