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寬高

  一、內部寬高client(padding+content，不包滾動條和border)
            width = elment.clientWidth
            height = elment.clientHeight
        二、總體寬高offset(padding+content+border+滾動條)
            width = elment.offsetWidth
            height = elment.offsetHeight
        三、含被overflow隱藏的內部寬高scroll（無滾動條時同一、client）
            width = elment.scrollWidth
            height = elment.scrollHeight
        四、內容寬高getBoundingClientRect(只包含content)
            size = element.getBoundingClientRect().width / height
            ie8-不支持width / height可運用right-left/bottom-top解決

• 獲取element位置

  offsetParent:設有position值爲absolute或relative的最近的上級元素
  
        一、相對父元素(offsetParent)左上角定位
            left = element.offsetLeft
            top =  element.offsetTop
  
        二、相對視口左上角定位 
            position=element.getBoundingClientRect().left/right/top/bottom
            //在ie下調試時，加上onscroll動態監聽scrollTop數據纔會正常刷新

• 獲取滾動條位置

  一、獲取element對象滾動條位置
           scrollTop = element.scrollTop
  
        二、獲取window滾動條位置兼容性方法
           scrollTop = window.scrollY 
                        || window.pageYOffset 
                        || (document.documentElement.scrollTop===0
                            ?document.body.scrollTop
                            :document.documentElement.scrollTop
                            );    
           //在ie下調試時，加上onscroll動態監聽scrollTop數據纔會正常刷新