firefox，google，ie7~Edge
一、3種方法能夠確定瀏覽器窗口的尺寸
方法1（ie8及其以下undefined）
不受滾動條影響
console.log( window.innerHeight )//- 瀏覽器窗口的內部高度 //662(由於打開了控制檯)
console.log( window.innerWidth )//- 瀏覽器窗口的內部寬度 //1920(有無滾動條都不變)
//
window.screen.height // 都支持
方法2
// 只獲取當前可見的寬受滾動影響 高不受影響。
console.log( document.documentElement.clientHeight )
console.log( document.documentElement.clientWidth ) //(滾動條1903)方法3：
//獲取的是body的寬高，會拋去自帶的8px的margin,(設置高爲2000px則爲2000px)
document.body.clientHeight // 0
document.body.clientWidth //1920(滾動條1903)2、綜合測試
//前提：body的高度設置爲2000px,做如下測試(控制檯會導致高度改變)
var h = window.innerHeight
var _h = document.documentElement.clientHeight
var _hh = document.body.clientHeight
var w = window.innerWidth
var _w = document.documentElement.clientWidth
var _ww = document.body.clientWidth
console.log( h )
console.log( _h )
console.log( _hh )
console.log( w )
console.log( _w )
console.log( _ww ) 在ie下能正常運行，兼容寫法：
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;二、其他視口和位置偏移
1、屏幕大小
//獲取屏幕大小，屏幕寬、高多少就是多少
var w = screen.availWidth
var h = screen.availHeight
console.log( h ) // 1040
console.log( w ) //19202、offsetHeight & offsetWidth
// 獲取寬度，高度，包括padding和border。
// 獲取body
document.body.offsetWidth();
// 獲取元素
var ele = document.getElementById('test');
ele.offsetHeight()3、offsetTop& offsetLeft & offsetParent;
獲取對象相對於版面或相對於父元素的（父元素需設置定位）左側位置
除了IE7獲得的是到body的距離。其他均爲到面板的距離。
// 如果父元素沒設置定位，則結果都是body，如果有定位則輸出父元素。
var ele = document.getElementById('test');
console.log(ele.offsetParent);4、scrollTop & scrollLeft
受到”<!DOCTYPE html>“的影響，下面都是在聲明下測試 , scrollTop的開始計算是從可視區域的最下邊開始的。
// google支持document.body;
console.log(document.body.scrollTop);
// firefox IE 支持document.documentElement
console.log(document.documentElement.scrollTop);兼容性寫法：var top = document.body.scrollTop || document.documentElement.scrollTop;
5、scrollWidth & scrollHeight
// 類似document.body；IE和firefox不算body的8px的margin；google計算
document.body.scrollHeight;
// 都會計算body的8px的margin
document.documentElement.scrollHeight三、位置獲取
1、e.clientX & e.clientY
IE9+ 和firefox 和google有效。相對文檔的水平座標 ，相對文檔的垂直座標 不受滾動影響。IE7和8需要正確指定event（window.event）。
var ele = document.getElementById('test');
ele.onclick = function(e) {
console.log(e.clientX);
console.log(e.clientY);
}2、e.pageX & e.pageY
google 和firefox 可以直接獲得滾動的座標。
var ele = document.getElementById('test');
ele.onclick = function(e) {
console.log(e.pageX);
console.log(e.pageY);
}
// IE8和以下用下邊的方式。
var pageX = e.pageX,
pageY = e.pageY;
if(pageX === undefined) {
pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
if(pageY === undefined) {
pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
}
3、e.screenX & e.screenY
IE7 & 8需要正確指定event。
console.log(e.screenY);IE7 & 8需要正確指定event。
4、e.offsetX & e.offsetY
相對於父元素的偏移量。
附圖片：來自於網絡
2016.8.22
2017.02.08二次編輯
