js各類寬高意義總結

一、window的各類寬高   outerWidth、innerWidth、outerHeight、innerHeight

1. outerHeight 獲取瀏覽器窗口外部的高度（單位：像素）。表示整個瀏覽器窗口的高度，包括側邊欄（若是存在）、窗口鑲邊（window chrome）和調整窗口大小的邊框（window resizing borders/handles）
2. innerHeight 瀏覽器視口的高度（單位：像素），若是存在水平滾動條則包括它
3. outerWidth 獲取瀏覽器窗口外部的寬度（單位：像素）。表示整個瀏覽器窗口的寬度，包括側邊欄（若是存在）、窗口鑲邊（window chrome）和調整窗口大小的邊框（window resizing borders/handles）
4. innerWidth 瀏覽器視口的寬度（單位：像素），若是存在垂直滾動條則包括它

　------以上四個屬性僅適用於 IE9+，對於老IE 則需注意兩點：

• IE8及如下不支持 outerWidth 和 outerHeight，且沒有提供替代的屬性
• 針對 innerWidth 和 innerHeight，能夠用過 document.documentElement.clientWidth/Height (標準模式) 和 document.body.clientWidth/Height (混雜模式) 替代

　------如下兩組屬性，聲明瞭窗口的左上角在屏幕上的 x 座標 和 y 座標，都不存在兼容性問題

• screenLeft /  screenTop  適用於 IE、Safari 和 Opera
• screenX / screenY          適用於 Firefox 和 Safari

二、window.screen 對象表示一個屏幕，包含用戶屏幕的信息

　　screen對象共包含6個寬高屬性 width、height、availWidth、availHeight、availTop、availLeft

1. width      返回顯示器屏幕的寬度（單位：像素）
2. height     返回顯示器屏幕的高度（單位：像素）
3. availWidth   返回顯示屏幕的可用寬度，除 windows 任務欄以外（單位：像素）
4. availHeight  返回顯示屏幕的可用高度，除 windows 任務欄以外（單位：像素）

三、document 相關的寬高

1. 　clientWidth  屬性表示元素的內部寬度（單位：像素）。包括內邊距，但不包括垂直滾動條（若是有），邊框和外邊距能夠經過 css width + css padding - 垂直滾動條寬度（若是有）來計算
2. 　clientHeight 屬性是隻讀的，對於沒有定義css或者內聯佈局盒子的元素爲0，不然，它是元素內部的高度（單位：像素）。包括內邊距，但不包括水平滾動條（若是有），邊框和外邊距
3. 　clientTop  一個元素頂部邊框的寬度（單位：像素），不包括頂部外邊距或內邊距
4. 　clinetLeft 一個元素左邊框的寬度（單位：像素），不包括左內邊距和左外邊距
5. 　offsetWidth   返回一個元素的佈局寬度。包括 元素的邊框（border）+ 水平線上的內邊距（padding）+ 垂直方向滾動條寬度（scrollbar）+ css 設置的寬度（width）
6. 　offsetHeight  返回一個元素的像素高度。包括 元素的邊框（border）+ 垂直線上的內邊距（padding）+ 水平方向滾動條高度（scrollbar）+ css 設置的高度（height），不包括 :before, :after 等僞元素的寬高
7. 　offsetTop  返回當前元素相對於其 offsetParent 元素的頂部的距離------> (當前元素的祖先元素沒有定位，offsetParent 最終是body ------當前元素的祖先元素定位了，offsetParent 取最近的那個祖先元素)
8. 　offsetLeft  返回當前元素左上角相對於其 offsetParent 元素的左邊界偏移的距離
9.     scrollWidth 返回元素的內容區域寬度 或 元素的自己的寬度中 更大的那個值。若元素的寬度大於其內容區域（如：存在滾動條時），scrollWidth 要大於 clientWidth
10. 　scrollHeight 等於該元素在不使用滾動條的狀況下爲了適應視口中所用內容所需的最小高度；若沒有垂直滾動條，scrollHeight 與 clientHeight 相同
11. 　scrollLeft  能夠讀取或設置元素滾動條到元素左邊的距離------> (若是元素不能滾動（如：沒有溢出），那麼 scrollLeft 的值是0) (若是給 scrollLeft 設置的值小於 0，那麼 scrollLeft 的值將變爲0) ( 若是給 scrollLeft 設置的值小於元素內容最大的寬度，那麼 scrollLeft 的值將被設爲元素的最大寬度)
12. 　scrollTop 能夠獲取或設置一個元素的內容垂直滾動的像素數------> ( 若是元素沒有垂直方向的滾動條，那麼 scrollTop 的值是0) (若是 scrollTop 設置的值小於0， 那麼 scrollTop的值將變爲0) ( 若是設置超出了這個容器可滾動的值，scrollTop 會被設置爲最大值)

四、Event 事件對象的座標

1. clientX和clientY ----> 相對於瀏覽器（可視區左上角0,0）的座標
2. screenX和screenY ----> 相對於設備屏幕左上角的（0,0）的座標
3. offsetX和offsetY ----> 相對於事件源左上角(0,0)的座標
4. pageX和pageY 相對於整個網頁左上角(0,0)的座標
5. X和Y 本是IE屬性，相對於用CSS動態定位的最內容包裹元素