Maison > interface Web > js tutoriel > le corps du texte

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

高洛峰
Libérer: 2017-01-11 09:39:25
original
1694 Les gens l'ont consulté

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
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

Obtenez généralement la taille de la page Web entière Copiez le code comme suit.

document.body.scrollWidth 
document.body.scrollHeight
Copier après la connexion

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
Copier après la connexion

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() 
} 
} 
}
Copier après la connexion

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
Copier après la connexion

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();
Copier après la connexion

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 !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal