Comment obtenir la largeur et la hauteur de la page avec jquery

En développement front-end, il est souvent nécessaire d'obtenir la largeur et la hauteur de la page afin de la mettre en page ou de l'ajuster dynamiquement en fonction de la taille de la page. Dans jQuery, obtenir la largeur et la hauteur de la page peut être obtenu grâce aux méthodes suivantes.

1. Utilisez les méthodes .width() et .height() pour obtenir la largeur et la hauteur de la page

jQuery fournit une série de méthodes d'acquisition de taille, notamment les méthodes .width() et .height(), qui sont utilisés pour obtenir la largeur et la hauteur de l'élément. Pour la page entière du document, nous pouvons obtenir la taille de la page en obtenant la largeur et la hauteur de l'élément body. L'exemple de code est le suivant :

var pageWidth = $('body').width();
var pageHeight = $('body').height();
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

Il convient de noter que la taille de page obtenue peut ne pas être la taille finale car la page peut être dans un état d'ajustement dynamique. Afin d'obtenir la taille de page finale, vous pouvez envelopper le code ci-dessus dans l'événement de chargement de fenêtre pour vous assurer que la page est entièrement chargée avant d'obtenir la taille. L'exemple de code est le suivant :

$(window).load(function(){
    var pageWidth = $('body').width();
    var pageHeight = $('body').height();
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

2. Utilisez l'objet $(window) pour obtenir la largeur et la hauteur de la page

Une autre méthode consiste à utiliser l'objet $(window) pour obtenir la largeur et la hauteur de la page. . L'objet $(window) représente l'objet fenêtre du navigateur, donc la taille actuelle de la fenêtre peut être obtenue via cet objet, qui est la taille de la page. L'exemple de code est le suivant :

var pageWidth = $(window).width();
var pageHeight = $(window).height();
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

Il convient également de noter que la taille de page obtenue peut ne pas être la taille finale, donc le code ci-dessus peut également être enveloppé dans l'événement de chargement de fenêtre pour garantir que la page est complètement chargée avant d'obtenir la taille. L'exemple de code est le suivant :

$(window).load(function(){
    var pageWidth = $(window).width();
    var pageHeight = $(window).height();
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

3. Utilisez document.documentElement.clientWidth et document.documentElement.clientHeight pour obtenir la largeur et la hauteur de la page

Une autre façon d'obtenir la largeur et la hauteur de la page consiste à utiliser document.documentElement. Propriétés clientWidth et document.documentElement.clientHeight . Ces deux propriétés représentent respectivement la largeur et la hauteur de la fenêtre d'affichage du document, qui est la zone visible de la page Web actuelle. L'exemple de code est le suivant :

var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);

Il convient également de noter que la taille de page obtenue peut ne pas être la taille finale, donc le code ci-dessus peut également être encapsulé dans l'événement de chargement de fenêtre pour garantir que la page est complètement chargée avant d'obtenir la taille. L'exemple de code est le suivant :

$(window).load(function(){
    var pageWidth = document.documentElement.clientWidth;
    var pageHeight = document.documentElement.clientHeight;
    console.log('页面宽度：' + pageWidth + '，页面高度：' + pageHeight);
});

Résumé :

L'effet obtenu par les trois méthodes ci-dessus est d'obtenir la largeur et la hauteur de la page. La méthode à utiliser dépend de vos besoins spécifiques et des réalités du projet. Cependant, une chose à noter est que la taille de page obtenue peut ne pas être la taille finale, il est donc préférable d'envelopper le code dans l'événement de chargement de fenêtre pour garantir que la page est complètement chargée avant d'obtenir la taille.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!