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