js以及jquery中關於尺寸和位置的方法和屬性

①網頁被捲起的寬度或高度

解釋：若是一個div，高度只有200px，即它的尺寸是受限的。當該div的內容高度超過div自己高度時，就會產生滾動條，拉動滾動條，div就會有捲起來的高度。

也就是說，一個元素，是否具備捲起來的高度或寬度，要看它內部的內容是否超過它自己，若是沒有超過，好比一個不限制高度的div，是永遠不會有捲起來的高度的。

默認的，html元素，或者是body元素，雖然沒有限制高度，可是一旦內容超過瀏覽器窗口，也會產生滾動條，所以，html和body元素默認具備捲起來的高度，而不用限制height。

js方法：

var h = document.documentElement.scrollTop || document.body.scrollTop;
var w = document.documentElement.scrollLeft || document.body.scrollLeft;

||是很是好用的運算符，用來解決兼容性問題。固然也能夠使用三目運算髮？：：或者if語句解決兼容性。

jquery方法：

JqueryObject.scrollTop();
JqueryObject.scrollLeft();

注意：若是是瀏覽器捲起來高度，對象是window對象，即:

$(window).scrollTop();

捲起來高度示意圖：

灰色表明瀏覽器窗口（不包括工具欄，網址輸入欄等），藍色和棕紅表明2個元素，綠色是滾動條。

②元素距離文檔的偏移量

解釋：這裏的文檔是指document。好比，你寫了3個div，示意如圖：

這3個div就是一個document。所謂獲取距離文檔的偏移量，就是指文檔中元素位於文檔中的何處位置的距離。能夠看出來，第2個div（棕紅色）距離文檔頂部的距離offsetTop的距離爲第一個div（藍色）的高度。無論是否滾動條滾動，文檔向上仍是向下移動，第2個div的offsetTop都不會發生改變（由於它所處的文檔的位置沒有改變）。

js方法：

DOM對象.offsetTop;
DOM對象.offsetLeft;

Jquery方法：

JqueryObject.offset().top;
JqueryObject.offset().left;

③元素相對於當前瀏覽器窗口的位置

解釋：瀏覽器窗口能夠上下左右拉伸。如何獲取一個div元素在當前視角下的偏移量呢。示意如圖：

獲取如圖所示的距離，即爲元素相對於當前視角的距離。

方法：先獲取第2個div的文檔頂部距離，而後減去window對象捲起來距離，示意如圖：

即：

$('第二個div對象').offset().top-$(window).scrollTop()