clientWidth,clientTOP,scrollTop,scrollHeight,offsetParent
Element.clientHeight，Element.clientWidth
Element.clientHeight属性返回一个整数值，表示元素节点的 CSS 高度（单位像素），只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。
除了元素本身的高度，它还包括padding部分，但是不包括border、margin。如果有水平滚动条，还要减去水平滚动条的高度。注意，这个值始终是整数，如果是小数会被四舍五入。
Element.clientWidth属性返回元素节点的 CSS 宽度，同样只对块级元素有效，也是只包括元素本身的宽度和padding，如果有垂直滚动条，还要减去垂直滚动条的宽度。
document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度），等同于window.innerHeight属性减去水平滚动条的高度（如果有的话）。document.body的高度则是网页的实际高度。一般来说，document.body.clientHeight大于document.documentElement.clientHeight。
// 视口高度
document.documentElement.clientHeight
// 网页总高度
document.body.clientHeightE5%BA%94%E7%94%A8
Element.clientLeft，Element.clientTop
Element.clientLeft属性等于元素节点左边框（left border）的宽度（单位像素），**不包括左侧的padding和margin。**如果没有设置左边框，或者是行内元素（display: inline），该属性返回0。该属性总是返回整数值，如果是小数，会四舍五入。
Element.clientTop属性等于网页元素顶部边框的宽度（单位像素），其他特点都与clientLeft相同。
Element.scrollHeight，Element.scrollWidth
Element.scrollHeight属性返回一个整数值（小数会四舍五入），表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分。它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。
Element.scrollWidth属性表示当前元素的总宽度（单位像素），其他地方都与scrollHeight属性类似。这两个属性只读。
整张网页的总高度可以从document.documentElement或document.body上读取。
// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeight
注意，如果元素节点的内容出现溢出，即使溢出的内容是隐藏的，scrollHeight属性仍然返回元素的总高度。
// HTML 代码如下
// <div id="myDiv" style="height: 200px; overflow: hidden;">...<div>
document.getElementById('myDiv').scrollHeight // 356
上面代码中，即使myDiv元素的 CSS 高度只有200像素，且溢出部分不可见，但是scrollHeight仍然会返回该元素的原始高度。
Element.scrollLeft，Element.scrollTop
Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素数量，Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0。
如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取。
document.documentElement.scrollLeft
document.documentElement.scrollTop
这两个属性都可读写，设置该属性的值，会导致浏览器将当前元素自动滚动到相应的位置。
Element.offsetParent
Element.offsetParent属性返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。
<div style="position: absolute;">
<p>
<span>Hello</span>
</p>
</div>
上面代码中，span元素的offsetParent属性就是div元素。
该属性主要用于确定子元素位置偏移的计算基准，Element.offsetTop和Element.offsetLeft就是offsetParent元素计算的。
如果该元素是不可见的（display属性为none），或者位置是固定的（position属性为fixed），则offsetParent属性返回null。
<div style="position: absolute;">
<p>
<span style="display: none;">Hello</span>
</p>
</div>
上面代码中，span元素的offsetParent属性是null。
如果某个元素的所有上层节点的position属性都是static，则Element.offsetParent属性指向<body>元素。
扫一扫
525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
