浏览器常见的几种尺寸

ScrollHeight

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

简单理解:元素的实际高度,包含可见(clientHeight)和不可见部分(overflow),不包含margin

ScrollTop

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

简单理解:元素已经滚动的距离,元素顶部距离容器顶部的距离,默认情况下为0

ClientHeight

实际内容高度,相当于css盒子模型的content area,如果出现滚动条,则相当于可是区域高度

offsetHeight

只读属性,返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。
和ClientHeight的区别在于是否包含padding和border
offsetHeight = contentHeight + padding * 2 + border * 2

offsetParent

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

简单理解:距离最近的定位元素,如果没有定位元素,相对于table或者根元素

offsetTop

只读属性,返回元素距离自身offsetParent元素在垂直方向的距离

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 1,518评论 1 3
  • Window和document对象的区别 window对象window对象表示浏览器中打开的窗口window对象是...
    FConfidence阅读 2,275评论 0 5
  • Element对象对应网页的HTML标签元素。每一个HTML标签元素,在DOM树上都会转化成一个Element节点...
    许先生__阅读 1,881评论 0 2
  • 前言 CSSOM全称CSS对象模型,涉及两部分内容,第一部分和操作样式表相关,第二部分和元素尺寸相关,本文介绍第二...
    江枫阅读 3,040评论 1 10
  • oDiv.clientWidth, oDiv.clientHeight 兼容性:全兼容内容区域的宽度、高度,不包括...
    桃花島主阅读 343评论 0 0