计算HTMLElement尺寸的一些属性和方法

Posted 2020-06-17

Properties:

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

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

clientTop: 一个元素顶部边框的宽度（以像素表示）。不包含顶部外边距或内边距。clientTop是只读的。

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

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

scrollWidth: 元素的scrollWidth只读属性以px为单位返回元素的内容区域宽度或元素的本身的宽度中更大的那个值。若元素的宽度大于其内容的区域（例如，元素存在滚动条时）, scrollWidth的值要大于clientWidth。

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

scrollLeft: 读取或设置元素滚动条到元素左边的距离。