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

时间 2019-11-06

原文原文链接

js 获取各类宽高+位置

-- 先上总结，再细细道来浏览器

总结

获取屏幕宽高调试

window.screen.width / window.screen.height //总区域
      window.screen.availWidth / window.screen.availHeight//可用区域
      //有些手机存在底部任务栏，通常直接用第一个就ok

获取浏览器宽高code

width = window.outerWidth
      height = window.outerHeight

获取浏览器位置对象

left = window.screenX || window.screenLeft
      top = window.screenY || window.screenTop

获取页面宽高element

(方法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宽高get

一、内部宽高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位置it

offsetParent:设有position值为absolute或relative的最近的上级元素

      一、相对父元素(offsetParent)左上角定位
          left = element.offsetLeft
          top =  element.offsetTop

      二、相对视口左上角定位 
          position=element.getBoundingClientRect().left/right/top/bottom
          //在ie下调试时，加上onscroll动态监听scrollTop数据才会正常刷新

获取滚动条位置io

一、获取element对象滚动条位置
         scrollTop = element.scrollTop

      二、获取window滚动条位置兼容性方法
         scrollTop = window.scrollY 
                      || window.pageYOffset 
                      || (document.documentElement.scrollTop===0
                          ?document.body.scrollTop
                          :document.documentElement.scrollTop
                          );    
         //在ie下调试时，加上onscroll动态监听scrollTop数据才会正常刷新