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

Yuanf 发布于2019-08-22 13:48 / 2132人阅读

摘要：获取各种宽高位置先上总结，再细细道来总结获取屏幕宽高总区域可用区域有些手机存在底部任务栏，一般直接用第一个就获取浏览器宽高获取浏览器位置获取页面宽高方法方法移动端，一般用就了获取宽高内部宽高，不包滚动条和整体宽高滚动条含被隐藏的内部

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92471.html

浏览器元素尺寸与位置查询指南

摘要：前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径算是比较全的一篇文章了在浏览器中获取元素的坐标以及尺寸是非常容易的有非常多种方式来完成这些需求但是杂乱的和很多兼容处理导致了浏览器中没有直接的方式来获取我们想要的结果仔细想想这个问前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径,算是比较全的一篇文章了. 在浏览器中获取元素的坐标以及尺寸是非常容易的,有非常多种...

lei___ 2019-08-26 13:44 评论0 收藏0
JavaScript中的各种宽高以及位置总结

摘要：和这一对属性是用来读取元素的的宽度和高度的。第二部分对象在中，对于元素的运动的操作通常都会涉及到对象，而对象也存在很多位置属性，且由于浏览器兼容性问题会导致这些属性间相互混淆，这里一一讲解。文章转自中的各种宽高以及位置总结在javascript中操作dom节点让其运动的时候，常常会涉及到各种宽高以及位置坐标等概念，如果不能很好地理解这些属性所代表的意义，就不能理解js的运动原理，同时...

microelec 2019-08-21 10:26 评论0 收藏0
浏览器的各种位置值获取

摘要：包括和属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。另外，方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角。网页元素的位置那就是使用方法。就是透过浏览器看内容的这个区域高度。获取网页的大小一张网页的全部面积，就是它的大小，通常是由内容和css样式表决定的。浏览器窗口的大小，是在浏览器中看到的那部分网页面积。又叫做viewport...

lvzishen 2019-08-21 11:53 评论0 收藏0
js中的各种宽高

摘要：之前项目刚写了个判断触底自动加载更多的功能，发现自己对各种宽高的定义还是很模糊。嗯，就这样过程中还是有很大收获的之前项目刚写了个判断触底自动加载更多的功能，发现自己对各种宽、高的定义还是很模糊。终于没有偷懒，写了个demo理解了一下。网上也有很多整理好的文章，为了加强下自身记忆，顺便也许能给些建议。 element的一些宽、高属性注：盒子模型： content+padding+mar...

Thanatos 2019-08-29 16:30 评论0 收藏0