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

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

高洛峰
高洛峰original
2017-01-11 09:39:251699parcourir

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() < $(&#39;body&#39;).width() ? $(document).width() : $(&#39;body&#39;).width(); 
$(document).height() < $(&#39;body&#39;).height() ? $(document).height() : $(&#39;body&#39;).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 !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn