关于元素的一些属性在前端的日常开发中，我们往往不可避免地需要获取或者监听一些页面的属性，所以我们需要经常了解一些属性代表什么，才能更好的利用这些属性的含义。特别是，这些：大小相关：offsetHeight、clientHeight、scrollHeight；偏移量相关：offsetTop、clientTop、scrollTop、pageYOffset、scrollY；获取相对视口位置：Element.getBoundingClientRect();获取元素的样式对象：Window.getComputedStyle(Element)；属性定义关于尺寸相关的属性定义：offsetHeight：Element.offsetHeight是一个只读属性，返回元素对应的高度px的值，为整数值，没有小数，隐藏元素返回0；others返回：innerHeight+padding+border+margin+元素的滚动条；但不包含::before或::after伪元素；clientHeight：Element.clientHeight是一个只读属性，返回元素对应的高度，单位px，值为整数值，没有小数。对于没有样式或者内联的元素，返回0。对于html元素或者怪异模式的body，返回视口高度，即整个页面的视口高度。其他情况：innerHeight+元素的padding；不包括边框、边距和滚动条；scrollHeight：是一个只读属性，返回元素对应的高度px的值，是一个整数值，没有小数点。在滚动的情况下，像Element.clientHeight，在子元素滚动的情况下，会是所有子元素的clientHeight高度之和+自身的padding；window.innerHeight：（浏览器窗口高度，不包括工具栏、菜单等，只是可见区域dom的高度）window.outerHeight：（浏览器窗口高度，包括工具栏、菜单等，高度整个浏览器）关于偏移量：offsetTop：只读属性，返回元素最近的相对定位距离父元素内边缘顶部的距离。在实际使用中，可能会出现因样式不同导致父元素相对定位不一致的兼容性问题。clientTop：上边框的宽度scrollTop：对于滚动元素，是已经滚动的距离，对于html，是window.scrollYwindow.scrollY，别名：window.pageYOffset，根节点垂直滚动的距离要求供开发相关资料获取整个页面可见区域的高度：【可见区域外不需要高度】constheight=window.innerHeight||文档.documentElement.clientHeight||文档.body.clientHeight；获取整个页面的高度：[包括可见区域外]constheight=document.documentElement.offsetHeight||文档.body.offsetHeight；获取整个页面的垂直滚动高度：constscrollTop=document.documentElement.scrollTop||文档.body.scrollTop;获取元素相对根距离节点的距离：//对于相对于根节点定位的元素consttop=Element.offsetTop;//对于不相对于根节点定位的元素，需要循环遍历getElementTop(element){letactualTop=element.offsetTopletcurrent=element.offsetParentwhile(current!==null){actualTop+=current.offsetTopcurrent=current.offsetParent}returnactualTop}//还有一个方法滚动距离+距视口上边距的距离consttop=Element.getBoundingClientRect().top+window.scrollY;获取元素相对于可见区域顶部的距离：consttop=Element.getBoundingClientRect().top;设置整个页面的垂直滚动位置：constisCSS1Compat=((document.compatMode||"")==="CSS1Compat");if(isCSS1Compat){document.documentElement.scrollTop=100;}else{document.body.scrollTop=100;}
