fi3ework's Studio.

client/scroll/offset width/height总结

2017/06/21 Share
  • Element.clientHeight & Element.clientWidth

    element.clientHeight(只读)

    返回元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。

    clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.

    Element.clientWidth(只读)

    Element.clientWidth 属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有的话)、边框和外边距

    element.clientHeight

  • Element.clientLeft(只读)& Element.clientTop(只读)

    表示一个元素的左边框的宽度,以像素表示。如果元素的文本方向是从右向左(RTL, right-to-left),并且由于内容溢出导致左边出现了一个垂直滚动条,则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距clientLeft 是只读的。

    一个元素顶部边框的宽度(以像素表示)。不包括顶部外边距或内边距。clientTop 是只读的。

  • Element.scrollTop(读写)

    这个Element.scrollTop 属性可以设置或者获取一个元素距离他容器顶部的像素距离。一个元素的 scrollTop 是可以去计算出这个元素距离它容器顶部的可见高度。当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0.

    • 如果一个元素不能被滚动 (e.g. 它没有溢出容器或者 这个元素是不可滚动的), scrollTop被设置为0.
    • 设置scrollTop的值小于0,scrollTop 被设为0
    • 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值.

      element.scrollTop

  • Element.scrollLeft(读写)

    Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。注意如果这个元素的内容排列方向(direction) 是rtl (right-to-left) ,那么滚动条会位于最右侧(内容开始处),并且scrollLeft值为0。此时,当你从右到左拖动滚动条时,scrollLeft会从0变为负数(这个特性在chrome浏览器中不存在)。

    • 如果元素不能滚动(比如:元素没有溢出),那么scrollLeft 的值是0。
    • 如果给scrollLeft 设置的值小于0,那么scrollLeft 的值将变为0。
    • 如果给scrollLeft 设置的值大于元素内容最大宽度,那么scrollLeft 的值将被设为元素最大宽度。
  • ELement.scrollHeight(只读) & Element.scrollHeigt(只读)

    Element.scrollHeight 是计量元素内容高度的只读属性,包括overflow样式属性导致的视图中不可见内容。没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的margin.

    Element.scrollHeight 是计量元素内容高度的只读属性,包括overflow样式属性导致的视图中不可见内容。没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的margin.

element.scrollHeight

  • HTMLElement.offsetHegiht(只读)& HTMLElement.offsetWidth(只读)

    HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。

    通常,元素的offsetHeight是一种衡量标准,包括元素的边框、垂直内边距和元素的水平滚动条(如果存在且渲染的话)和元素的CSS高度。

    对于文档的主体对象,它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。

    HTMLElement.offsetWidth 是一个只读属性,返回一个元素的布局宽度。一个典型的(译者注:各浏览器的offsetWidth可能有所不同)offsetWidth是测量元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scroolbar)(如果存在的话)、以及CSS设置的宽度(width)的值。

HTMLElement.offsetHegiht

  • HTMLElement.offsetParent(只读)

    HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(closest,指包含层级上的最近)包含该元素的定位元素。如果没有定位的元素,则 offsetParent 为最近的 table元素对象或根元素(标准模式下为 html;quirks 模式下为 body)。当元素的 style.display 设置为 “none” 时,offsetParent 返回 nulloffsetParent 很有用,因为 offsetTopoffsetLeft 都是相对于其内边距边界的。

    浏览器兼容性

    在 Webkit 中,如果元素为隐藏的(该元素或其祖先元素的 style.display 为 “none”),或者该元素的 style.position 被设为 “fixed”,则该属性返回 null

    在 IE 9 中,如果该元素的 style.position 被设置为 “fixed”,则该属性返回 null。(display:none 无影响。)

  • HTMLElement.offsetLeft(只读)& HTMLElement.offsetTop(只读)

    HTMLElement.offsetLeft 是一个只读属性,返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界(内边距边界)偏移的像素值。

    对块级元素来说,offsetTopoffsetLeftoffsetWidthoffsetHeight 描述了元素相对于 offsetParent 的边界框。

    然而,对于可被截断到下一行的行内元素(如 span),offsetTopoffsetLeft 描述的是第一个边界框的位置(使用 Element.getClientRects() 来获取其宽度和高度),而 offsetWidthoffsetHeight 描述的是边界框的维度(使用 Element.getBoundingClientRect 来获取其位置)。因此,使用 offsetLeft、offsetTop、offsetWidthoffsetHeight 来对应 left、top、width 和 height 的一个盒子将不会是文本容器 span 的盒子边界。

    HTMLElement.offsetTop 为只读属性,它返回当前元素相对于其 offsetParent 元素的顶部的距离。

总结图

Microsoft has a nice image in the MSDN:


总结:

  • clientHegiht clientWidth:包括padding,不包括border的可见区域大小,不能通过CSS计算得到大小,因为不知道滚动条的大小。
  • offsetHeight offsetWidth:包括border, padding和滚动条的可见区域大小,可以通过width + padding得到大小。

  • scrollHeight scrollWidth,页面内容的总长度,不包括border,不能通过CSS计算大小。

应用

  • 判断滚动元素是否到底(比如安装软件时的协议条款)

    1
    element.scrollHeight - element.scrollTop === element.clientHegiht;

参考文献

  • MDN
CATALOG
  1. 1. Element.clientHeight & Element.clientWidth
    1. 1.1. element.clientHeight(只读)
    2. 1.2. Element.clientWidth(只读)
  2. 2. Element.clientLeft(只读)& Element.clientTop(只读)
  3. 3. Element.scrollTop(读写)
  4. 4. Element.scrollLeft(读写)
  5. 5. ELement.scrollHeight(只读) & Element.scrollHeigt(只读)
  6. 6. HTMLElement.offsetHegiht(只读)& HTMLElement.offsetWidth(只读)
  7. 7. HTMLElement.offsetParent(只读)
    1. 7.1. 浏览器兼容性
  8. 8. HTMLElement.offsetLeft(只读)& HTMLElement.offsetTop(只读)
  • 总结图
  • 总结:
  • 应用
  • 参考文献