$(window).width() 与 $(document).width() 之间的区别

Question

jQuery 中 $(window).width() 与 $(document).width() 之间的主要区别是什么？ window是否代表浏览器，document是否代表html页面的主体？我说得对吗？

Answer 1

来自 width() 的文档：

此方法还能够找到窗口和文档的宽度。

$(窗口).width(); // 返回浏览器视口的宽度
$(文档).width(); // 返回 HTML 文档的宽度

简单的 jsFiddle 演示

在演示中，我设置了 html { width: 1000px; }，它比视口大。

HTML 页面主体的宽度是第三个值。 $('body').width() 也可以与其他两个不同（例如尝试 body { margin: 100px; }）。

Answer 2

你是对的。 window 是浏览器的可视区域。 document 是页面的实际主体。因此您的文档可以远远超出窗口

Answer 3

嗯，窗口是第一个加载到浏览器中的东西。
这个window对象具有大部分属性，例如length、
innerWidth、innerHeight、name，如果已关闭，则其父级以及
更多。

那么文档对象呢？

document 对象是您的 html 文档，它将被加载到
浏览器。 document 实际上被加载到 window 对象中
并具有可用的属性，如标题、URL、cookie 等。
这真的意味着吗？这意味着如果您想访问某处房产
window 则为 window.property，如果是 document 则为
window.document.property 也可以简称为
document.property.

所以总而言之，文档可能比窗口小。

来自：http://eligeske。 com/jquery/document-and-window-objects-2/之间的差异是什么/

Answer 4

$(window).width(); 返回浏览器视口的宽度

$(document).width(); 返回 HTML 文档的宽度

$(document) .width() 有点不可靠，导致全屏浏览器的值较低。 $(window).width() 更安全。

$(window).width() 获取窗口的整个宽度，包括滚动条之类的内容。

Answer 5

另一个重要的区别。

$(window).width(); 在文档加载/准备好之前可用

$(document).width(); 仅在文档​​加载后可用

所以对于第二个，你需要

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

Answer 6

是 - 窗口宽度是浏览器窗口的宽度，文档宽度是网页的宽度。