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

人生苦短,必须性感!

152 声望
4 粉丝
0 条评论
你知道吗?

人生苦短,必须性感!

152 声望
4 粉丝
宣传栏