獲取各種螢幕高度寬度(工作)

安穩.發表於2019-04-02

Created By JishuBao on 2019-04-01 12:38:22
Recently revised in 2019-04-01 15:38:22

 

  歡迎大家來到技術寶的掘金世界,您的star是我寫文章最大的動力！GitHub地址     

  開篇點題:   
  相信大家在平時工作中經常遇到一大堆的什麼scrollTop、offsetTop經常看的暈暈的，在javascript中操作dom節點讓其運動的時候，常常會涉及到各種寬高以及位置座標等概念，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運動原理，同時，由於這些屬性概念較多，加上瀏覽器之間本次我們就總結一下各種高度寬度,懂得基礎方能寫出更好的程式碼   
   感覺不錯的小夥伴，點贊star走一波;  
   感覺文章有誤的小夥伴，評論區、QQ群走一波；  
   虛心求教，不勝感激~

文章簡介：

所有的測試都是ie盒子模型下，即width=content

1、DOM物件

2、Event物件

一、DOM物件

1.只讀屬性

所謂的只讀屬性指的是DOM節點的固有屬性，該屬性只能通過js去獲取而不能通過js去設定，而且獲取的值是隻有數字並不帶單位的（px,em等），如下：

  • clientWidth和clientHeight

該屬性指的是元素的可視部分寬度和高度，即padding+content，如果沒有滾動條，即為元素設定的高度和寬度，如果出現滾動條，滾動條會遮蓋元素的寬高，那麼該屬性就是其本來寬高減去滾動條的寬高(17px)。

  • offsetWidth和offsetHeight

這一對屬性指的是元素的border+padding+content的寬度和高度，該屬性和其內部的內容是否超出元素大小無關，只和本來設定的border以及width和height有關。

  • clientTop和clientLeft

這一對屬性是用來讀取元素的border的寬度和高度的。

  • offsetLeft和offsetTop

說到這對屬性就需要說下offsetParent,所謂offsetParent指的是當前元素的離自己最近的具有定位的（position:absolute或者position：relative）父級元素（不僅僅指的是直接父級元素，只要是它的父元素都可以），該父級元素就是當前元素的offsetParent，如果從該元素向上尋找，找不到這樣一個父級元素，那麼當前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是當前元素，相對於其offsetParent左邊距離和上邊距離。

  • scrollHeight和scrollWidth

顧名思義，這兩個屬性指的是當元素內部的內容超出其寬度和高度的時候，元素內部內容的實際寬度和高度，需要注意的是，當元素其中內容沒有超過其高度或者寬度的時候，該屬性是取不到的。

2可讀可寫屬性

所謂的可讀可寫屬性指的是不僅能通過js獲取該屬性的值，還能夠通過js為該屬性賦值。

  • scrollTop和scrollLeft

這對屬性是可讀寫的，指的是當元素其中的內容超出其寬高的時候，元素被捲起的高度和寬度。

1.dom.scrollTop=20;
2.dom.onscroll=function(){
    ..code..
}
複製程式碼
  • obj.style.*屬性

對於一個dom元素，它的style屬性返回的是一個物件，這個物件中的任意一個屬性是可讀寫的。如obj.style.top,obj.style.wdith等，在讀的時候，他們返回的值常常是帶有單位的(如px),同時，對於這種方式，它只能夠獲取到該元素的行內樣式，而並不能獲取到該元素最終計算好的樣式，這就是在讀取屬性值得時候和以上只讀屬性的區別，要獲取計算好的樣式，請使用obj.currentstyle（IE）和getComputedStyle(IE之外的瀏覽器)。另一方面，這些屬效能夠被賦值，js運動的原理就是通過不斷修改這些屬性的值而達到其位置改變的，需要注意的是，給這些屬性賦值的時候需要帶單位的要帶上單位，否則不生效。

二、Event物件

在js中，對於元素的運動的操作通常都會涉及到event物件，而event物件也存在很多位置屬性，且由於瀏覽器相容性問題會導致這些屬性間相互混淆，這裡一一講解。

  • clientX和clientY

這對屬性是當事件發生時，滑鼠點選位置相對於瀏覽器可視區的座標，即瀏覽器左上角座標的（0,0），該屬性以瀏覽器左上角座標為原點，計算滑鼠點選位置距離其左上角的位置。

不管瀏覽器視窗大小如何變化，都不會影響點選位置的座標。

  • screenX和screenY

這對屬性是事件發生時滑鼠相對於螢幕的座標，以裝置螢幕的左上角為原點，事件發生時滑鼠點選的地方即為該點的screenX和screenY值。

  • offsetX和offsetY

這一對屬性是指當事件發生時，滑鼠點選位置相對於該事件源的位置，即點選該div，以該div左上角為原點來計算滑鼠點選位置的座標。

  • pageX和pageY

顧名思義，該屬性是事件發生時滑鼠點選位置相對於頁面的位置，通常瀏覽器視窗沒有出現滾動條時，該屬性和event.clientX及event.clientY是等價的，但是當瀏覽器出現滾動條的時候，pageX通常會大於clientX，因為頁面還存在被捲起來的部分的寬度和高度。

相關文章