摘要：前言這篇文章主要介紹了有關瀏覽器中獲取坐標以及尺寸的幾種途徑算是比較全的一篇文章了在瀏覽器中獲取元素的坐標以及尺寸是非常容易的有非常多種方式來完成這些需求但是雜亂的和很多兼容處理導致了瀏覽器中沒有直接的方式來獲取我們想要的結果仔細想想這個問

這篇文章主要介紹了有關瀏覽器中獲取坐標以及尺寸的幾種途徑,算是比較全的一篇文章了.

在瀏覽器中獲取元素的坐標以及尺寸是非常容易的,有非常多種方式來完成這些需求,但是雜亂的API和很多兼容處理導致了瀏覽器中沒有直接的方式來獲取我們想要的結果.

仔細想想這個問題,為什么瀏覽器并沒有直接提供一個簡單的屬性就告訴你瀏覽器窗口的大小,或者一個元素的寬高.

就拿div元素來舉例,我們有很多的問題影響到了元素寬高:

border 是否納入寬高的計算?

padding 是否納入寬高的計算?

magin 是否納入寬高的計算?

box-sizing:border-box; 時候該如何計算?

父元素使用了overflow:hidden;把我們的元素裁剪了,這時候的寬高該如何計算?

元素使用了overflow出現了滾動條此時該如何計算?

而如果要獲取一個瀏覽器窗口的大小,你還要面對我們到底是要獲取哪個大小?

屏幕大小?

瀏覽窗口大小?

瀏覽區域大小?

是否包含滾動條?

當然最終你還要面臨一個兼容問題,致我們敬愛的IE瀏覽器,不過本文可不探討瀏覽器之間的差異.不過本文的涉及到的內容應該在IE9以上都是可以正常使用的(不過建議你還是查下can i use 或者MDN).

瀏覽器的寬高計算主要通過window對象來完成.

這個對象上提供了幾個關鍵屬性:

window.innerWidth

window.innerHeight

window.outerWidth

window.outerHeight

用人類語言來描述這幾個屬性就是.

友情出演windows畫圖:

注意:單位均為px.

注意:滾動條并不視為瀏覽器的ui中的內容,而是視為內容區域的一部分,右側默認的滾動條的寬度包含在window.innerWidth中,但是不屬于html元素和html下的任何元素.

無論是橫向滾動條還是縱向滾動條,對于測量clientXXX這個單位來說是不包括滾動條的寬(高)的.

例如在下面這張圖中我們進行測量父元素(黑色區域)的clientWidth結果和子元素(紅色區域)的clientWidth的大小是一樣的.

不過需要注意的是,一旦出現了滾動條對于clientWidth來說就意味著寬度減小(高度同理).

注意:圖片所指的寬度是clientWidth

所以在margin:0;padding:0;border-width:0;情況下offsetWidth - clientWidth=滾動條的寬度.

通過這種方式我求出了chrome瀏覽器滾動條大小是17px整,但是不要忘記這些API只會返回整數.

注意:scrollXXX對于滾動條計算的規則和clientXXX表現一致.

請記住,對于clientXXX來說,元素的大小就是padding+content.

而使用border-box后元素的表現就是padding和border的修改就不會影響到元素的大小.

此時width是多少clientWidth就是多少,height同理.

但是不要忘記了邊框不參與clientXXX的計算,所以border的修改并不會影響元素的寬高變化,那么那么當border變大,對應的clientXXX就變小.

一個元素設置了border-box:

box{
  width:100px;
  padding:20px;
  border:20px solid;
  box-sizing:border-box;
}

此時clientWidth= 100px - 20px*2(左右邊框的寬度) = 60px

由于offsetXXX的計算是包含border的大小的,所以如果一個元素設置了border-box那么offsetWidth就等于元素的width大小,因為border被限制到了width中.

子元素的offsetWidth|height是相對于父元素內容區域(padding+content)左側和頂部的偏移量.

這個兩個是相對值,是要求出向對于父級使用定位情況下來進行計算的,這個父元素可以通過HTMLElement.offsetParent來獲取到.

例如:父級使用absolute或者relative.

注意:后文提出的父元素都指的是使用了相對定位的父元素.

注意:以上都是對于塊級元素所描述的,對于行內元素或者td等元素相對的父元素不盡相同,這里不考慮這些情況,詳情可以查看上方的鏈接.

在子元素使用了絕對定位的情況下,父元素無法干預子元素,所以子元素的scrollLeft就是left+margin-left.

第二種情況就是父元素和子元素都使用了相對定位,而相對定位是不脫離文檔流的,那么父元素的padding-left就會影響到子元素的scrollLeft屬性.

在線實例

注意:貌似offsetTop和Left在不同瀏覽器下有不同計算值,會帶來兼容性問題,這里就不展開了,有興趣的讀者可以去查閱相關資料.

首先scrollTop和scrollLeft是一對可讀寫的屬性,這意味著你可以獲取他的值也可以設置它從而控制滾動的距離.

注意:scrollTop|scrollLeft是用在含有滾動區域的元素上(圖中黑色邊框的元素),而不是被滾動的元素上測量,被滾動的元素scrollTop永遠是0.

簡單理解:在垂直方向上含有滾動條的元素的內容區域的頂部(padding+content)相對于自身頂部邊框的底部向上移動的距離(水平方向同理).

就是scrollTop的大小(圖中超出去的部分).

關于這個方法建議閱讀MDN的指南.當然你也可以選擇聽我瞎扯幾句.

這個api是ie首先提出(早在ie4時候就有了)的這也是ie對web開發的貢獻之一.

調用這個api會返回一個DOMRect對象,這個對象多次易名,不過沒有變化過基本概念.

當你調用這個方法的時候他會返回一個對象,該對象擁有如下幾個屬性:

left

top

right

bottom

width

height

x

y

注意:ie9+包括edge兼容width和height截止到2019年4月5日ie和edge不兼容x和y.

和屬性返回的值有兩點不同:

返回的值都是相對值,相對于瀏覽器視口的左上角

返回的值包含小數部分,這意味著獲取到的值更加精確

如何理解:

如果頁面中只有一個1000px高100%寬的div(沒有margin,padding,border),那它的bottom和height應該1000,left和top是0,right和width是元素寬度:

因為我們指定了1000px所以他的height是1000,
因為頁面中只有這一個元素,他的內容區域底部到可視區域頂部的距離就是1000,所以bottom是1000.

因為頁面中只有這一個元素,所以這個元素是貼著可視區域的頂端和左側的,所以left和top這兩個值都是0.

div默認會鋪滿橫向的空間,橫向空間中只有我們的div所以right到視口區域左側的距離就是元素的寬度,也是當前可視區域的寬度.

注意:left,right,top,bottom指的是內容區域的邊緣到視口左上角的距離,不包括border和margin,padding,如果指定了box-sizing:border-box;則也包括border和padding.

但是,由于是該對象的值是相對值,而視口是會移動的,所以top和left的值在視口移動后會發生改變.

圖解:

注意:該屬性返回的值也將滾動條視為寬度(縱向)和高度(橫向)的一部分.

和getBoundingClientRect類似的還有另外一個api叫做getClientRects.這個api作用起來稍微復雜一些,簡單的作用于內聯元素的時候兩者有區別,首先它返回的是數組,包含這個內聯元素所有行的DOMRect對象,當內聯元素只有一行的時候這兩個api表現一樣的.

思否上一篇關于getClientRects的討論
https://segmentfault.com/q/10...

這部分主要利用window.screen對象,這個對象抽象的表示當前使用的物理顯示設備.

沒錯這個屬性是和硬件有關的,一般的Web開發中很少會使用這個屬性.

通過這個對象你可以獲取到有關屏幕的分辨率等信息

這里就不多介紹了,附上一篇介紹詳細的文章:

https://www.cnblogs.com/ndos/...

此外在windows上還有幾個關于屏幕的屬性:

使用樣式來獲取元素的大小以及定位是一種常見的操作,但是問題在于使用HTMLelement.style獲取的內容:

是帶有css單位的字符串

需要寫在內聯中才可以獲取到

使用style獲取元素的大小或者寬高無疑是方便的,這里返回的值和css模型是一致的.

這個API和HTMLelement.style類型,調用這個API返回CSSStyleDeclaration對象.

區別在于:

只讀

可以使用css完整的名稱來獲取樣式,例如font-size

不僅計算內聯樣式還包括樣式表中的樣式

注意:當元素的樣式修改的時候對應的CSSStyleDeclaration也會實時同步,你不需要對一個元素進行連續獲取.

MDN滾動參數兼容性參考
https://developer.mozilla.org...

快速解釋: