自己記不住,列一下關於CSS和JS中用到的各類有關Height和Width屬性的介紹對比.
| 所屬類別 | 屬性名 | 意義 | 其他 |
|---|---|---|---|
| 瀏覽器模型 | Screen.height | 瀏覽器視窗所在的螢幕的高度（單位畫素） |
1.除非調整顯示器的解析度，否則這個值可以看作常量，不會發生變化。 2.顯示器的解析度與瀏覽器設定無關，縮放網頁並不會改變解析度。 |
| Screen.width | 瀏覽器視窗所在的螢幕的寬度（單位畫素） | ||
| Screen.availHeight | 瀏覽器視窗可用的螢幕高度（單位畫素） | 因為部分空間可能不可用，比如系統的工作列或者 Mac 系統螢幕底部的 Dock 區，這個屬性等於height減去那些被系統元件的高度。 | |
| Screen.availWidth | 瀏覽器視窗可用的螢幕寬度（單位畫素） | ||
| window.innerHeight | 返回網頁在當前視窗中可見部分的高度（單位畫素） | 1.只讀,使用者放大網頁的時候（比如將網頁從100%的大小放大為200%），這兩個屬性會變小。因為這時網頁的畫素大小不變（比如寬度還是960畫素），只是每個畫素佔據的螢幕空間變大了，因為可見部分（視口）就變小了。 2.注意:這兩個屬性值包括滾動條的高度和寬度 |
|
| window.innerWidth | 返回網頁在當前視窗中可見部分的寬度 | ||
| window.outerHeight | 返回瀏覽器視窗的高度 | 包括瀏覽器選單和邊框（單位畫素）,只讀 | |
| window.outerWidth | 返回瀏覽器視窗的寬度 | ||
| 元素節點 | Element.clientHeight | 返回一個整數值，表示元素節點的 CSS 高度（單位畫素） | 1.只對塊級元素生效，對於行內元素返回0。如果塊級元素沒有設定 CSS 高度，則返回實際高度。 2.除了元素本身的高度，它還包括padding部分，但是不包括border、margin。如果有水平滾動條，還要減去水平滾動條的高度。 3.注意，這個值始終是整數，如果是小數會被四捨五入。 |
| Element.clientWidth | 返回元素節點的 CSS 寬度 | ||
| Element.scrollHeight | 表示當前元素的總高度（單位畫素），包括溢位容器、當前不可見的部分 | 1.只讀. 2.它包括padding，但是不包括border、margin以及水平滾動條的高度（如果有水平滾動條的話），還包括偽元素（::before或::after）的高度。 |
|
| Element.scrollWidth | 表示當前元素的總寬度（單位畫素） | ||
| Element.offsetHeight | 表示元素節點的 CSS 高度（單位畫素） | 1.包括元素本身的高度、padding 和 border，以及水平滾動條的高度（如果存在滾動條）。 2.只讀屬性。 3.只比 Element.clientHeight和Element.clientWidth多了邊框的高度或寬度。 4.如果元素的 CSS 設為不可見（比如display: none;），則返回0。 |
|
| Element.offsetWidth | 表示元素的 CSS 水平寬度（單位畫素） | ||
| 備註 | 1.document.documentElement的clientHeight屬性，返回當前視口的高度（即瀏覽器視窗的高度），等同於window.innerHeight屬性減去水平滾動條的高度（如果有的話） 2.document.body的高度則是網頁的實際高度。一般來說，document.body.clientHeight大於document.documentElement.clientHeight 3.整張網頁的總高度可以從document.documentElement.scrollHeight或document.body.scrollHeight上讀取。 |
||
有關座標的屬性：
1. MoiseEvent.clientX：返回滑鼠事件觸發時滑鼠相對於元素視口（body）的X座標。
2. MouseEvent.clientY：返回滑鼠事件觸發時滑鼠相對於元素視口（body）的Y座標
如果有錯誤,麻煩您指出,相互學習.
謝謝~~