web-dev-qa-db-ja.com

$（window）.width（）と$（document）.width（）の違い

JQueryの$(window).width()と$(document).width()の主な違いは何ですか？ウィンドウがブラウザを表し、ドキュメントがhtmlページの本文を表すかどうか？私は正しいですか？

javascriptjqueryjquery-selectorsdimensions
51
kbvishnu

width()のドキュメント から：

このメソッドは、ウィンドウとドキュメントの幅を見つけることもできます。

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

シンプルなjsFiddleデモ

デモでは、ビューポートよりも大きい_html { width: 1000px; }_を設定しました。

HTMLページの本文の幅は3番目の値です。 $('body').width()は他の2つと異なる場合もあります（たとえば、_body { margin: 100px; }_を試してください）。

60
kapa

あなたは正しいです。 windowは、ブラウザの表示可能な領域です。 documentは実際のページの本文です。したがって、documentはwindowをはるかに超えて拡張できます。

21
Henesnarfel

さて、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/

8
Rick Hoving

$(window).width();はブラウザのビューポートの幅を返します

$(document).width();はHTMLドキュメントの幅を返します

$(document).width()は少し信頼性が低いため、フルスクリーンブラウザーの値が低くなります。 $（window）.width（）の方が安全です。

$(window).width()は、スクロールバーなどを含むウィンドウの幅全体を取得します。

5
Mouna Cheikhna

もう一つの重要な違い。

$(window).width();は、ドキュメントがロードされる/準備ができる前に使用可能です

$(document).width();は、ドキュメントがロードされた後にのみ使用可能です

第二に、あなたが必要です

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

はい-ウィンドウの幅はブラウザウィンドウの幅であり、ドキュメントの幅はWebページの幅です。

2
Mateusz W