Js獲取寬高度的歸納總結

首先，先嚇唬一下我們的小白們！在js中的描述寬高的可以細分有22種。

1. window.innerWidth //除去菜單欄的窗口寬度
2. window.innerHeight//除去菜單欄的窗口高度
3. window.outerWidth//包括菜單欄的窗口寬度
4. window.outerHeight//包括菜單欄的窗口寬度
5. window.screen.height//電腦屏幕的高度
6. window.screen.width//電腦屏幕的寬度
7. window.screen.availHeight//電腦屏幕的可利用高度
8. window.screen.availWidth//電腦屏幕的可利用寬度
9. window.screenTop//瀏覽器距離屏幕的高度
10. window.screenLeft//瀏覽器距離屏幕的寬度
11. document.body.clientWidth//指元素的自身寬度（包括padding）
12. document.body.clientHeight//指元素的自身的高度（包括padding）
13. document.body.clientLeft//子級div內容位置到父級內容區域的寬度距離(即border值)
14. document.body.clientTop//子級div內容位置到父級內容區域的高度距離(即border值)
15. document.body.offsetWidth//指定元素的寬度（包括padding，border和內容）
16. document.body.offsetHeight//指定元素的高度（包括padding，border和內容）
17. document.body.offsetTop//距離父級元素的高度
18. document.body.offsetLeft//距離父級元素的寬度
19. document.body.scrollWidth//獲取的是文檔的寬度（當指定的寬度小於瀏覽器窗口的時候，為瀏覽器的寬度）
20. document.body.scrollHeight//獲取的是文檔的高度（當指定的高度小於瀏覽器窗口的時候，為瀏覽器的高度）
21. document.body.scrollTop//文檔被滾動上去的時候（即滾動條往上滾動的距離）
22. document.body.scrollLeft//文檔被滾動右去的時候（即滾動條往右滾動的距離）

看起來有點怕怕，但我們細分可以很清晰的分清楚他們

• width和height的都是值元素或窗口等的寬高，top和left表示的是到相對元素的距離
• client,offset,scrollh和screen都分別有width，height，top和left
• 最后就是區別窗口和屏幕的寬高和元素的寬高

我們先從上往下去分析每一個的作用

innerHeight/Width

outerHeight/Width

Screen屏幕寬高

首先我們先分清楚widnow和document的區別
 window 整個窗口
 document 除了頂頭的菜單欄
 document對象是window對象的一部分
話不多說，直接上圖

 

offset

document.body.offsetWidth
document.body.offsetHeight
指定元素的border+padding+內容的寬度和高度

如果沒有padding和border
offsetWidth = clientWidth

兼容性問題
IE6/7中（微軟已經不提供支持）
offsetLeft = (offsetParent的padding-left)+(當前元素的margin-left)

IE8以上
offsetLeft = (offsetParent的margin-left)+(當前元素的margin-left)

火狐中
offsetLeft = (offsetParent的margin-left)+(當前元素的margin-left)+(offsetParent的padding-left)

client

指定元素的寬度和高度 即內容+padding

如果沒有滾動條，即元素本身設定的寬度
如果出現滾動條，滾動條會遮蓋元素寬高，那么，該屬性就是其本來寬高減去滾動條的寬度
console.log( document.body.clientHeight);
console.log(document.body.clientWidth);

讀取元素border的寬度和高度（子級內容區域到父級內容區域的距離）
document.body.clientLeft
document.body.clientTop

scroll

谷歌瀏覽器下

• 當指定的寬高小於瀏覽器窗口的時候
  • scrollWidth為瀏覽器的寬度
  • scrollHeight為瀏覽器的高度
• 當給的寬高大於瀏覽器窗口，且內容小於給定的寬高時
  • scrollWidth給定的寬度+padding、margin和border
  • scrollHeight給定的寬度+padding、margin和border
• 當給定的寬高大於瀏覽器窗口，且內容大於給定的寬高
  • scrollWidth內容寬度+所有的padding,margin和border
  • scrollHeight內容高度+所有的padding,margin和border

屬性時可讀寫的

指當元素其中的內容超出其寬高的時候，元素被卷起的高度和寬度

懶加載思路

在還沒有這個技術的出現時，頁面的所有內容和圖片，都會在訪問時一次性的加載出來，對於瀏覽器和服務器都是一種負擔，如果想百度圖片這樣的圖庫，用手機來看，多少流量都是浪費。這樣的用戶體驗不僅差，還給服務器增加負擔。所以懶加載技術才醞釀出來。

懶加載技術的要點是通過滾動事件觸發判斷

元素到頂部的距離小於       <=      可視區域 client（滿足條件后觸發加載后台內容）

底部加載技術
scrollTop+可視區域 == 網頁高度 scrollHeight（滿足條件后觸發加載后台內容）

一天多寫一點點，一天多積累一點點！

（完！）