js 獲取窗口、屏幕、頁面元素寬高+位置（兼容ie）

Yuanf 發布于2019-08-22 13:48 / 2166人閱讀

摘要：獲取各種寬高位置先上總結，再細細道來總結獲取屏幕寬高總區域可用區域有些手機存在底部任務欄，一般直接用第一個就獲取瀏覽器寬高獲取瀏覽器位置獲取頁面寬高方法方法移動端，一般用就了獲取寬高內部寬高，不包滾動條和整體寬高滾動條含被隱藏的內部

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數據才會正常刷新

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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