$（window）.width（）vs $（document）.width（）

Question

之間的區別在jQuery中，$(window).width()與$(document).width()之間的主要區別是什麼？ 窗口是否表示瀏覽器，文檔是否表示html頁面的主體？我對麼 ？

Answer 1

從documentation of width()：

這種方法也能找到的窗口和文檔的寬度。

$(window).width(); // returns width of browser viewport 
$(document).width(); // returns width of HTML document 

Simple jsFiddle Demo

在演示中，我已經設置html { width: 1000px; }，這比視大。

HTML頁面正文的寬度是第三個值。 $('body').width()也可以與其他兩個不同（例如，請嘗試body { margin: 100px; }）。

Answer 2

是 - 窗口寬度爲瀏覽器窗口寬度，文檔寬度爲網頁寬度。

Answer 3

你是對的。 window是瀏覽器的可視區域。 document是頁面的實際主體。所以，你的document可能遠遠超出window

Answer 4

$(window).width();返回瀏覽器窗口的寬度HTML文檔的

$(document).width();收益寬度

$(document).width()有點不可靠，導致較低的值全屏蔽瀏覽器。 $（window）.width（）更安全。

$(window).width()獲取窗口的整個寬度，包括像滾動條之類的東西。

Answer 5

那麼，window是第一件被加載到瀏覽器中。 這window對象具有類似於length廣大的特性， innerWidth，innerHeight，name，如果它已關閉，其父母和 更多。

那麼文檔對象呢？

document對象是您的html文檔，將被加載到 瀏覽器中。 document實際上被加載到window對象 內部並且具有可用的屬性，如標題，URL，cookie等。 這是什麼意思？這意味着如果你要訪問一個屬性 的window是window.property，如果是document它是 window.document.property這也是短期可作爲 document.property。

因此，最後文件可能比窗口小。

FROM：http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/

Answer 6

另一個重要區別。

$(window).width();是可用的文件加載之前/準備

$(document).width();僅提供後該文件已經加載

因此，對於第二，你需要

$(document).ready(function() { 
    var w = $(document).width(); 
});