js 获取各种宽高+位置
-- 先上总结，再细细道来
总结
-
获取屏幕宽高
window.screen.width / window.screen.height //总区域 window.screen.availWidth / window.screen.availHeight//可用区域 //有些手机存在底部任务栏，一般直接用第一个就ok
-
获取浏览器宽高
width = window.outerWidth height = window.outerHeight
-
获取浏览器位置
left = window.screenX || window.screenLeft top = window.screenY || window.screenTop
-
获取页面宽高
(方法1) width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight (方法2) function getPageSize(){ var page = document.documentElement ?document.documentElement :document.body, gcr = page.getbBoundingClientRect() return { width:Math.abs(gcr.right-gcr.left) height:Math.abs(gcr.bottom-gcr.top) } } (移动端，一般用inner就ok了) width = window.innerWidth height = window.innerHeight -
获取element宽高
1、内部宽高client(padding+content，不包滚动条和border) width = elment.clientWidth height = elment.clientHeight 2、整体宽高offset(padding+content+border+滚动条) width = elment.offsetWidth height = elment.offsetHeight 3、含被overflow隐藏的内部宽高scroll（无滚动条时同1、client） width = elment.scrollWidth height = elment.scrollHeight 4、内容宽高getBoundingClientRect(只包含content) size = element.getBoundingClientRect().width / height ie8-不支持width / height可运用right-left/bottom-top解决
-
获取element位置
offsetParent:设有position值为absolute或relative的最近的上级元素 1、相对父元素(offsetParent)左上角定位 left = element.offsetLeft top = element.offsetTop 2、相对视口左上角定位 position=element.getBoundingClientRect().left/right/top/bottom //在ie下调试时，加上onscroll动态监听scrollTop数据才会正常刷新
-
获取滚动条位置
1、获取element对象滚动条位置 scrollTop = element.scrollTop 2、获取window滚动条位置兼容性方法 scrollTop = window.scrollY || window.pageYOffset || (document.documentElement.scrollTop===0 ?document.body.scrollTop :document.documentElement.scrollTop ); //在ie下调试时，加上onscroll动态监听scrollTop数据才会正常刷新