web-dev-qa-db-fra.com

Différence entre $ (window) .width () et $ (document) .width ()

Quelle est la principale différence entre $(window).width() et $(document).width() dans jQuery? Si la fenêtre dénote le navigateur et le document représente le corps de la page html? Ai-je raison ?

javascriptjqueryjquery-selectorsdimensions
51
kbvishnu

De la documentation de width() :

Cette méthode est également capable de trouver la largeur de la fenêtre et du document.

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

Démo jsFiddle simple

Dans la démo, j'ai défini html { width: 1000px; }, Qui est plus grand que la fenêtre d'affichage.

La largeur du corps de votre page HTML est une troisième valeur. $('body').width() peut également différer des deux autres (essayez par exemple body { margin: 100px; }).

60
kapa

Vous avez raison. window est la zone visible du navigateur. document est en fait le corps de la page. Ainsi, votre document pourrait s'étendre bien au-delà du window

21
Henesnarfel

Eh bien, le window est la première chose qui est chargée dans le navigateur. Cet objet window possède la majorité des propriétés comme length, innerWidth, innerHeight, name, s'il a été fermé, son les parents, et plus encore.

Et l'objet document alors?

L'objet document est votre document html qui sera chargé dans le navigateur. Le document est en fait chargé à l'intérieur de l'objet window et possède des propriétés comme le titre, l'URL, le cookie, etc. Qu'est-ce que cela signifie vraiment? Cela signifie que si vous souhaitez accéder à une propriété pour le window c'est window.property, si c'est document c'est window.document.property qui est également disponible en bref sous la forme document.property.

Donc, en conclusion, le document pourrait être plus petit que la fenêtre.

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

8
Rick Hoving

$(window).width(); renvoie la largeur de la fenêtre du navigateur

$(document).width(); renvoie la largeur du document HTML

$(document).width() est un peu peu fiable, ce qui entraîne une valeur inférieure pour un navigateur plein écran. $ (window) .width () est plus sûr.

$(window).width() obtient toute la largeur de la fenêtre, y compris des éléments comme la barre de défilement.

5
Mouna Cheikhna

Une autre différence importante.

$(window).width(); est disponible avant que le document ne soit chargé/prêt

$(document).width(); n'est disponible qu'après le chargement du document

Donc, pour la seconde, vous avez besoin

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

Oui - la largeur de la fenêtre est la largeur de la fenêtre du navigateur et la largeur du document est la largeur de la page Web.

2
Mateusz W