Maison > Article > interface Web > js/jquery obtient la hauteur et la largeur de la zone visible de la fenêtre du navigateur ainsi que le code d'implémentation de la hauteur de la barre de défilement
Obtenez la hauteur et la largeur de la zone visible de la fenêtre du navigateur. Les amis qui ont besoin de la hauteur de la barre de défilement peuvent s'y référer.
Dans IE, la taille de la fenêtre d'affichage du navigateur ne peut être obtenue qu'en procédant comme suit : Copiez le code comme suit
document.body.offsetWidth document.body.offsetHeight
Dans les navigateurs qui déclarent DOCTYPE, vous pouvez utiliser ce qui suit pour obtenir la taille de la fenêtre d'affichage du navigateur : Code Copiez le code comme suit
document.documentElement.clientWidth document.documentElement.clientHeight
IE, FF et Safari prennent tous en charge cette méthode. Bien qu'oper prenne en charge cet attribut, il renvoie la taille de la page
En même temps, tous les navigateurs sauf ; IE utilise cette méthode. Les informations sont stockées dans l'objet window et peuvent être obtenues en utilisant le code suivant : Copiez le code comme suit
window.innerWidth window.innerHeight
Obtenez généralement la taille de la page Web entière Copiez le code comme suit.
document.body.scrollWidth document.body.scrollHeight
La résolution et la hauteur de l'écran sont généralement obtenues Le code de la méthode est le suivant Copiez le code
window.screen.height window.screen.width
Pour résumer l'exemple
function getViewSizeWithoutScrollbar(){//不包含滚动条 return { width : document.documentElement.clientWidth, height: document.documentElement.clientHeight } } function getViewSizeWithScrollbar(){//包含滚动条 if(window.innerWidth){ return { width : window.innerWidth, height: window.innerHeight } }else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){ return { width : document.documentElement.offsetWidth, height: document.documentElement.offsetHeight } }else{ return { width : document.documentElement.clientWidth + getScrollWith(), height: document.documentElement.clientHeight + getScrollWith() } } }
Les différences entre IE et FireFox sont les suivants :
IE6.0, FF1.06 :
clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5: clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height
Ci-joint est la méthode la plus couramment utilisée pour obtenir la largeur et la hauteur de la page entière (nécessite le framework jquery). Copiez le code comme suit
$(document).width() < $('body').width() ? $(document).width() : $('body').width(); $(document).height() < $('body').height() ? $(document).height() : $('body').height();
alert($(window).height()); //Navigateurs de nos jours Hauteur de la zone visible de la fenêtre
alert($(document).height()); /Hauteur du document de la fenêtre actuelle dans le navigateur
alert($(document.body).height());//Navigateur La hauteur du corps du document de la fenêtre actuelle
alert($(document.body). externalHeight(true));//La hauteur totale du corps du document de la fenêtre actuelle du navigateur inclut la marge de remplissage de la bordure
alert($(window).width ()); //La largeur de la zone visible de la fenêtre actuelle du navigateur
alert($(document).width());//La largeur actuelle de l'objet de document de la fenêtre du navigateur
alert($(document.body) .width());//La hauteur du corps du document de la fenêtre actuelle du navigateur
alert($(document.body).outerWidth(true));//La largeur totale du corps du document de la fenêtre actuelle du navigateur inclut la marge de remplissage de la bordure
alert($(document).scrollTop() ); //Obtenir la hauteur verticale de la barre de défilement vers le haut
alert($(document).scrollLeft()); //Obtenir la hauteur verticale de la barre de défilement vers la gauche Largeur verticale
Pour plus de js/jquery permettant d'obtenir la hauteur et la largeur de la zone visible de la fenêtre du navigateur et le code d'implémentation de la hauteur de la barre de défilement, veuillez faire attention au site Web PHP chinois pour les articles connexes !