1.可視區高寬度：瀏覽器展示內容的大小，會隨瀏覽器邊框調整而改變。
①獲取：$(window).height(); $(window).width();

2.頁面的文件高度：瀏覽器頁面展示內容的高度，與瀏覽器外邊框無關，只與內容有關，包括內容的寬度，margin，border等。
①獲取：$(document).height(); $(document).width();

3.滾動條滾動距離（包括距離頂部和左邊的垂直寬度）
①獲取：$(document).scrollTop(); $(document).scrollLeft();

4.計算元素位置和偏移量,包括通過css獲取(含單位px)和offset(純number數值)獲取
①$("#id").offset();

測試例子：

// 獲取瀏覽器顯示區域的高度 ： 
console.log("1.可視區視窗高度（調整視窗外框會改變，裡面的內容無關）："+$(window).height()); 
// 獲取瀏覽器顯示區域的寬度 ：
console.log("2.可視區視窗寬度（調整視窗外框同樣會改變）："+$(window).width()); 
// 獲取頁面的文件高度 ：
console.log("3.文件高度document （頁面中填充物撐開的高度會包括物體高度，margin、border\padding) "+$(document).height()); 
// 獲取頁面的文件寬度 ：
console.log("4.文件寬度document "+$(document).width());		 
// 獲取滾動條到頂部的垂直高度 ：		 
console.log("5.滾動條頂部的距離"+$(document).scrollTop()); 
// 獲取滾動條到左邊的垂直寬度 ：			 
console.log("6. 滾動條左邊的距離"+$(document).scrollLeft());			 
// 計算元素位置和偏移量：	
console.log("7. 元素距離頁面邊框上下左右的距離：");
console.log($("#idd").offset());
console.log($("#idd").offset().top);
console.log($("#idd").css("width"));
// offset方法是一個很有用的方法，它返回包裝集中第一個元素的偏移資訊。預設情況下是相對body的偏移資訊。結果包含 top和left兩個屬性。
 

測試結果：----------------------------

—clientX:返回當事件被觸發時滑鼠指標向對於瀏覽器頁面（或客戶區）的水平座標。
clientY:與上類似，是垂直方向滑鼠對於瀏覽器頁面的距離。

----document.documentElement.clientWidth:獲取瀏覽器視窗文件顯示區域的寬度，不包括滾動條。
document.documentElement.clientHeight: 與上類似

—document.documentElement.offsetWidth：獲取DOM文件的根節點html元素物件的寬度，即offsetWidth=width+padding+border，不包括margin。
document.documentElement.offsetHeight：高度。