获取窗口属性元素几何尺寸

Posted 2020-12-17 cuishuangshuang

1、查看滚动条的滚动距离

　　（1）

　　　　IE9以下不兼容

　　　　window.pageXOffset：查看滚动条水平方向滚动的距离

　　　　window.pageYOffset：查看滚动条垂直方向滚动的距离

　　（2）

　　　　document.body/documentElement.scrollLeft/scrollTop

　　　　兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值

　　　　var  scrollLeft  =  document.documentElement.scrollLeft  +  document.body.scrollLeft

　　　　var  scrollTop=  document.documentElement.scrollTop  +  document.body.scrollTop

2、查看视口的尺寸

　　（1）window.innerWidth、window.innerHeight

　　　　IE9以下不兼容

　　（2）document.documentElement.clientWidth、document.documentElement.clientHeight

　　　　标准模式下，任意浏览器都兼容

　　（3）document.body.clientWidth、document.body.clientHeight

　　　　适用于怪异模式下的浏览器

3、查看元素的几何尺寸

　　（1）el.getBoundingClientRect( )

　　　　兼容性好、返回的结果不是实时的

　　　　该方法返回一个对象，对象里面有left、top、right、bottom、width、height属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角X和Y坐标

　　（2）el.offsetWidth、el.offsetHeight