window.innerHeight屬性與outerHeight屬性
通過window.innerHeight和window.outerHeight可以得到整個窗口的高度。其中：
- innerHeight是DOM視口的大小，包括滾動條。
-
outerHeight是整個瀏覽器窗口的大小，包括窗口標(biāo)題、工具欄、狀態(tài)欄等。
inner-outter-height.png
window.innerHeight
720
window.outerHeight
860
把Height改為Width同樣有效，分別是innerWidth和outerWidth。
scrollX、scrollY
- scrollX：滾動條橫向偏移
- scrollY：滾動條縱向偏移
scrollX
28
scrollY
7
這兩個值隨著滾動位置變化而變化
scrollTo、scrollBy、scroll
我們也可以通過方法scrollTo或者scroll方法改變滾動條位置到指定坐標(biāo)
window.scrollTo(0, 300); // 滾動條縱向偏移移動到300px處
兩個參數(shù)分別是水平、垂直方向偏移
scrollBy可以相對當(dāng)前位置移動滾動條，而不是移動到絕對位置
scrollBy(0, 100); // 滾動條下移100px
頁面寬高
element.clientHeight
element.offsetHeight
element.scrollHeight
元素滾動內(nèi)容的總長度。如果元素沒出現(xiàn)滾動條， scrollHeight等于 clientHeight
element.scrollTop
滾動的高度
window.innerHeight
窗口的高度
element.getBoundingClientRect() 獲取元素在視窗中的位置
問題： 如果判斷一個元素距離 document 頂部的偏移
function getOffsetTop( elem ){
var offsetLeft = 0
do {
offsetTop += elem.offsetTop
} while( elem = elem.offsetParent )
return offsetTop
}
element.getBoundingClientRect().top + document.body.scrollTop
范例：獲取圖片真實的寬高
onload加載所有的相關(guān)數(shù)據(jù)后，取寬高
// 圖片地址
var img_url = ‘13643608813441.jpg'
// 創(chuàng)建對象
var img = new Image()
// 改變圖片的src
img.src = img_url
// 加載完成執(zhí)行
img.onload = function(){
// 打印
alert('width:'+img.width+',height:'+img.height)
}
如何獲取元素的真實寬高
1.offsetHeight 可以用來計算元素的物理空間，此空間包括內(nèi)容，padding 和 border（還包括滾動條的寬度，但大多時候滾動條的寬度是計算到 padding 和內(nèi)容中的）
2.scrollHeight 用來計算可滾動容器的大小，包括不可見的部分，比如一個 300*300 的容器放入一個 600*600 的圖片，此時 scrollHeight 為 600，當(dāng)然，scrollHeight 的值需要加上 padding 的值。
3.clientHeight 表示可視區(qū)域，包括內(nèi)容和 padding ，如果有滾動條，還需要減去滾動條的寬度。
4.getComputedStyle是一個可以獲取當(dāng)前元素所有最終使用的CSS屬性值,getComputedStyle 可以提供給我們元素 border 和 padding 寬度在內(nèi)的一系列值（仍然不要通過 element.style.border-width 獲得），加上原先的 offsetHeight，就可以減去 border 和 padding 的值獲得元素的真實尺寸。
