js 获取窗口、屏幕、页面元素宽高+位置（兼容ie）

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数据才会正常刷新