DOM中的尺寸

查看滚动条的滚动距离

•     标准方法：window.pageXOffset window.pageYOffset  

    浏览器中document.documentElement.scrollLeft  和 document.body.scrollLeft 一个有另一个就没有

•     document.body.scrollLeft（和 window.pageXOffset 效果一样）              document.body.scrollTop（和 window.pageYOffset 效果一样） 
•     document.documentElement.scrollLeft                 document.documentElement.scrollTop

查看窗口实际尺寸  非可视区,包括滑动条距离

•     document.body.clientWidth      document.body.clientHeight
•     document.body.scrollHeight      document.body.scrollWidth

查看可视区窗口尺寸

•     标准方法：window.innerWidth          window.innerHeight  
•     document.documentElement.clientWidth             document.documentElement.clientHeight      

查看元素几何尺寸

•     dom.getBoundingClientRect()   content+padding+border

查看元素的尺寸

•     dom.scrollWidth    dom.clientHeight        content+padding   
•     dom.clientWidth    dom.clientHeight        content+padding   
•     dom.offsetWidth    dom.offsetHeight       content+padding+border     
•     dom.offsetParent： 返回最近有定位的父级，  若无，返回body,body.offsetParent返回 null。
•     dom.style.width     dom.style.height         content

元素坐标

•     dom.offsetLeft    dom.offsetTop   坐标,求的只是自己和有定位的父级之间的距离
•     getElementPosition()   相对文档的位置

让滚动条滚动

•    window.scroll(x,y)     window.scrollTo(x,y)   定位
•    window.scrollBy(x,y)    累加

脚本化 css

•     读写元素css属性   dom.style        可读可写
•     查询计算样式      window.getComputedStyle(dom,null)   第二个参数为伪类名可以取伪类  只能读
•     查询样式          dom.currentStyle(IE独有)  只能读

本文地址：https://blog.csdn.net/qq_45044074/article/details/114003292