js中的各類寬高

以前項目剛寫了個判斷觸底自動加載更多的功能，發現本身對各類寬、高的定義仍是很模糊。終於沒有偷懶，寫了個demo理解了一下。網上也有不少整理好的文章，爲了增強下自身記憶，順便也許能給些建議。

element的一些寬、高屬性
注：盒子模型： content+padding+margin+border

element.clientWidth =content + 左右padding
element.clientHeight = content + 上下padding
// 元素的內容部分 + 對應的padding（左右/上下）；當外層元素有滾動條時，該值是不包含滾動條的寬度的
// block元素 不設置width的話，默認繼承外層元素的寬度 => 所以目標元素的寬 = 外層元素是否有滾動條？(外層元素寬 - 滾動條寬度 - element的左右border - element的左右margin):(外層元素寬 - element的左右border - element的左右margin）；若是不設置height，並且padding也爲0的話；即便外層元素高度值再大，目標元素的clientHeight仍爲0

element.clientLeft = 左border
element.clientTop = 上border
// 元素的邊框寬度

element.scrollWidth = content + 左右padding
element.scrollHeight = content + 上下padding
// 與元素的clientWidth相同

element.scrollLeft = 超出瀏覽器部分的最左側到瀏覽器最左側的距離（即爲文檔卷出瀏覽器的部分長度）
element.scrollTop = 超出瀏覽器部分的最上側到瀏覽器最上側的距離（即爲文檔卷出瀏覽器的部分高度）

element.scrollWidth = content + 左右padding
element.scrollHeight = content + 上下padding
// 與元素的clientWidth相同

element.offsetWidth = content + 左右padding + 左右border
element.offsetTop = content + 上下padding + 上下border

element.offsetLeft = element最左側距離（從border外開始）外層元素的距離
element.offsetTop = element最上側距離（從border外開始）外層元素的距離
// 這個值是固定的，不會隨着滾動發生變化

注：ie/chrome/firefox獲取body的scrollTop和scrollLeft時，直接用document.body.scrollTop取到的值都是0；要改成document.documentElement.scrollTop；或者使用window.pageXOffset,這個屬性兼容性會高一些，ie8以上以及firefox、chrome都支持

window的一些寬、高屬性

window.innerWidth = 瀏覽器可視區域的寬度（包含滾動條寬度）
window.outerWidth = 瀏覽器可視區域的寬度（包含滾動條寬度）
// 在chrome/firefox上測試 window的innerWidth和outerWidth是同樣的
// **ie測試結果有點疑問，還要排查下再來補充**

window.screenLeft = 瀏覽窗口距離屏幕可視區域最左側的距離
window.screenTop = 瀏覽窗口（包含頂部地址欄、工具欄）距離屏幕可視區域最上側的距離
// chrome測試結果，在主屏幕上的結果：screenLeft:0;screenTop:0;
//可是在外接顯示屏中的瀏覽器打開就有問題；外接顯示屏的距最左側距離不是從0開始而是從主屏幕的可見區域寬度開始的，所以此時screenLeft的值爲主屏幕的寬度；screenTop也同樣存在差值；外接顯示屏應該也是以主屏幕的邊界爲參考
// firefox不支持這兩個屬性
// 在ie中;screenTop的最小值不是0，而是頂部地址欄和工具欄的高度。

window.screenX = 瀏覽窗口距離屏幕可視區域最左側的距離
window.screenY = 瀏覽窗口（包含頂部地址欄、工具欄）距離屏幕可視區域最上側的距離
// chrome測試結果： 與screenLeft/screenTop測試結果一致
// firefox測試結果： 與chrome的screenLeft/screenTop結果同樣
// ie測試結果都爲：-8？？有點奇怪

window.pageXOffset = 超出瀏覽器部分的最左側到瀏覽器最左側的距離（即爲文檔卷出瀏覽器的部分長度）
window.pageYOffset = 超出瀏覽器部分的最上側到瀏覽器最上側的距離（即爲文檔卷出瀏覽器的部分高度）
// 在chrome/firefox/ie 上測試；結果都相等，且等價於scrollTop/scrollLeft的值；兼容性要好於scrollTop/scrollLeft

screen的寬/高

screen.width = 屏幕的寬度（分辨率寬）
screen.height= 屏幕的高度（分辨率高）
// 在chrome/firefox/ie 上測試；結果都相等，屏幕的分辨率，與瀏覽器窗口大小無關

screen.availWidth = 屏幕的寬度（分辨率寬）
screen.availHeight= 屏幕的高度（分辨率高）
// firefox/chrome/ie availHeight 與電腦窗口的頂部導航欄和底部導航欄的高度有關（注意不是瀏覽器內部的導航欄）
// availWidth 與電腦窗口的左側導航/工具欄和右導航/工具欄的高度有關（注意不是瀏覽器內部的導航欄）

點擊事件的event對象裏的一些寬、高

e.clientX = 當前鼠標距離瀏覽器最左側的距離
e.clientY = 當前鼠標距離瀏覽器最上側的距離（不包含工具欄、地址欄）
// 原點:(0,0)
// chrome/firefox/ie  結果一致，主屏與外接屏結果也一致

e.screenX = 當前鼠標距離瀏覽器最左側的距離 
e.screenY = 當前鼠標距離瀏覽器最上側的距離（包含工具欄、地址欄）
// 原點:(0,瀏覽器的工具欄+地址欄的高度+屏幕頂部導航/工具欄的高度（若是有的話）)
// chrome/firefox/ie 在主屏上都 = clientX；在外接顯示屏中，受主屏幕影響存在誤差

e.offsetX = 當前鼠標距離當前元素最左側的距離
e.offsetY = 當前鼠標距離當前元素最上側側的距離
// chrome/firefox/ie 結果一致，主屏與外接屏結果也一致

e.pageX = 當前鼠標距離瀏覽器最左側的距離
e.pageY = 當前鼠標距離瀏覽器最上側的距離（不包含工具欄、地址欄）

e.x = 當前鼠標距離瀏覽器最左側的距離
e.y = 當前鼠標距離瀏覽器最上側的距離（不包含工具欄、地址欄）

通常而言（無外接屏幕） e.clientX = e.screenX = e.x = e.pageX；e.clientY = e.screenY = e.Y = e.pageY

寫在最後的話

心累啊，各類瀏覽器對一些屬性的支持還不同，結果也不同；之前框架用得太多，公司這邊對兼容性要求也沒有很大，因此寫法少不多有注重兼容性問題；雖然其中的大部分屬性也許一時半會兒用不到，可是捋清楚仍是好的，ie的一些測試，等用同事電腦測過再回頭改改。嗯，就這樣；過程當中仍是有很大收穫的！