位置属性总结

位置属性总结

window

无offsetParent属性

  • innerHeight
    浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它
  • outerHeight
    Window.outerHeight 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）

inner

  • innerWidth
    浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。
  • outerWidth
    Window.outerWidth 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）
  • screen
    • availHeight
      屏幕中非固定占用空间^固定占用空间的高度
    • availLeft
      屏幕中非固定占用空间的左边离显示器左边的距离
    • availTop
      屏幕中非固定占用空间的顶部离显示器顶部的距离
    • availWidth
      屏幕中非固定占用空间的宽度
    • height
      显示器的纵向分辨率
    • width
      显示器的横向分辨率
  • screenLeft
    同screen.availLeft
  • screenTop
    同screen.availTop
  • screenX
    返回浏览器左边界到操作系统桌面左边界的水平距离
  • screenY
    返回浏览器顶部距离系统桌面顶部的垂直距离
  • scrollX
    返回文档/页面水平方向滚动的像素值
  • scrollY
    返回文档在垂直方向已滚动的像素值

element

offsetParent:
返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null

  • clientHeight
    内部无其它有高度的元素且本身没有设置与高度有关的CSS的外部元素或者display:inline的元素值为0，其他情况下，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距
  • clientWidth
    元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距
  • clientLeft
    表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距
  • clientTop
    一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距
  • offsetLeft
    当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值
  • offsetTop
    返回当前元素相对于其 offsetParent 元素的顶部的距离
  • offsetHeight
    返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数
  • offsetWidth
    返回一个元素的布局宽度，offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值
  • scrollHeight
    返回元素内容高度的度量，包括由于溢出导致的视图中不可见内容。scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度
  • scrollLeft
    读取或设置元素滚动条到元素左边的距离
  • scrollTop
    获取或设置一个元素的内容垂直滚动的像素数
  • scrollWidth
    返回元素的内容区域宽度或元素的本身的宽度中更大的那个值–若元素的宽度大于其内容的区域（例如，元素存在滚动条时）

mouseEvent

  • clientX
    事件发生时的应用客户端区域的水平坐标
  • clientY
    提供事件发生时的应用客户端区域的垂直坐标
  • layerX(非标准)
  • layerY(非标准)
  • movementX
    当前事件和上一个mousemove事件之间鼠标在水平方向上的移动值
  • movementY
    当前事件和上一个 mousemove 事件之间鼠标在水平方向上的移动值
  • offsetX(实验中的功能)
    事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量
  • offsetY(实验中的功能)
    事件对象与目标节点的内填充边（padding edge）在 Y 轴方向上的偏移量
  • pageX
    返回事件对象相对于整个文档左侧的距离（考虑页面的水平方向上的滚动）
  • pageY
    返回事件对象相对于相对于整个文档上侧距离（考虑页面的垂直方向上的滚动）
  • screenX
    事件对象相对于屏幕坐标系的水平偏移量
  • screenY
    事件对象相对于屏幕坐标系的垂直偏移量
  • x(实验中的功能)
    MouseEvent.clientX 属性的别名
  • y(实验中的功能)
    MouseEvent.clientY 属性的别名
分享到