La largeur de la zone visible de la page web : document.body.clientWidth
La hauteur de la zone visible de la page web : document.body.clientHeight
La largeur de la zone visible de la page web : document.body.offsetWidth (y compris la largeur des bords)
La hauteur de la zone visible de la page web : document.body.offsetHeight (y compris la largeur du bord)
Largeur du texte intégral du corps de la page Web : document.body.scrollWidth
Hauteur du texte intégral du corps de la page Web : document.body.scrollHeight
La hauteur de la page Web en cours de défilement : document.body.scrollTop
Le côté gauche de la page Web en cours de défilement : document.body.scrollLeft
Sur le corps principal de la page Web : window.screenTop
La partie gauche du corps principal de la page Web : window.screenLeft
Haute résolution d'écran : window.screen.height
La largeur de la résolution de l'écran : window.screen.width
Hauteur de la zone de travail disponible à l'écran : window.screen.availHeight
Largeur de la zone de travail disponible à l'écran : window.screen.availWidth
Positionnement HTML précis : scrollLeft, scrollWidth, clientWidth, offsetWidth
scrollHeight : obtient la hauteur de défilement de l'objet.
scrollLeft : définit ou obtient la distance entre le bord gauche de l'objet et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre
scrollTop : définit ou obtient la distance entre le haut de l'objet et le haut du contenu visible dans la fenêtre
scrollWidth : récupère la largeur de défilement de l'objet
offsetHeight : obtient la hauteur de l'objet par rapport à la mise en page ou à la coordonnée parent spécifiée par la propriété offsetParent de la coordonnée parent.
offsetLeft : obtient la position gauche calculée de l'objet par rapport à la mise en page ou à la coordonnée parent spécifiée par la propriété offsetParent.
offsetTop : obtient la position supérieure calculée de l'objet par rapport à la mise en page ou aux coordonnées parent spécifiées par la propriété offsetTop
Coordonnée horizontale event.clientX par rapport au document
coordonnée verticale event.clientY par rapport au document
coordonnée horizontale event.offsetX par rapport au conteneur
coordonnée verticale event.offsetY par rapport au conteneur
valeur document.documentElement.scrollTop pour le défilement vertical
event.clientX+document.documentElement.scrollTop La coordonnée horizontale par rapport au document + la quantité de défilement vertical
Les différences entre IE et FireFox sont les suivantes :
IE6.0, FF1.06+ :
clientWidth = largeur + remplissage
clientHeight = hauteur + remplissage
offsetWidth = largeur + remplissage + bordure
offsetHeight = hauteur + remplissage + bordure
IE5.0/5.5 :
clientWidth = largeur - bordure
clientHeight = hauteur - bordure
offsetLargeur = largeur
offsetHauteur = hauteur
(Il faut le mentionner : l'attribut margin en CSS n'a rien à voir avec clientWidth, offsetWidth, clientHeight et offsetHeight)
Largeur de la zone visible de la page Web : document.body.clientWidth
La hauteur de la zone visible de la page web : document.body.clientHeight
La largeur de la zone visible de la page web : document.body.offsetWidth (y compris la largeur des bords)
La hauteur de la zone visible de la page web : document.body.offsetHeight (y compris la hauteur du bord)
Largeur du texte intégral du corps de la page Web : document.body.scrollWidth
Hauteur du texte intégral du corps de la page Web : document.body.scrollHeight
La hauteur à laquelle la page Web défile : document.body.scrollTop
Le côté gauche de la page Web en cours de défilement : document.body.scrollLeft
Sur le corps principal de la page Web : window.screenTop
La partie gauche du corps principal de la page Web : window.screenLeft
La hauteur de la résolution de l'écran : window.screen.height
La largeur de la résolution de l'écran : window.screen.width
Hauteur de la zone de travail disponible à l'écran : window.screen.availHeight
Largeur de la zone de travail disponible à l'écran : window.screen.availWidth
－－－－－－－－－－－－－－－－－－
Points techniques
Le code de cette section utilise principalement certaines propriétés de l'objet Document concernant la fenêtre. Les principales fonctions et utilisations de ces propriétés sont les suivantes.
Pour obtenir la taille de la fenêtre, différentes propriétés et méthodes doivent être utilisées pour différents navigateurs : pour détecter la taille réelle de la fenêtre, vous devez utiliser les propriétés de la fenêtre sous Netscape, sous IE, vous devez pénétrer en profondeur dans le navigateur ; Document pour détecter le corps ; Dans l'environnement DOM, si vous souhaitez obtenir la taille de la fenêtre, vous devez faire attention à la taille de l'élément racine, pas à l'élément.
La propriété innerWidth de l'objet Window contient la largeur intérieure de la fenêtre actuelle. La propriété innerHeight de l'objet Window contient la hauteur intérieure de la fenêtre actuelle.
L'attribut body de l'objet Document correspond à la balise du document HTML. La propriété documentElement de l'objet Document représente le nœud racine du document HTML.
document.body.clientHeight représente la hauteur actuelle de la fenêtre où se trouve le document HTML. document.body.clientWidth représente la largeur actuelle de la fenêtre où se trouve le document HTML.
Implémenter le code
Copiez le code comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<title>Veuillez redimensionner la fenêtre du navigateur</title>
<méta http-equiv="content-type" content="text/html; charset=gb2312">
</tête>
<corps>
<h2 align="center">Veuillez redimensionner la fenêtre du navigateur</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--Afficher la taille réelle de la fenêtre du navigateur-->
Hauteur réelle de la fenêtre du navigateur : <input type="text" name="availHeight" size="4"><br>
Largeur réelle de la fenêtre du navigateur : <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var largeurgagnante = 0 ;
var winHauteur = 0 ;
function findDimensions() //Fonction : Récupérer les dimensions
{
//Obtenir la largeur de la fenêtre
si (window.innerWidth)
winWidth = window.innerWidth ;
sinon si ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth ;
//Obtenir la hauteur de la fenêtre
si (window.innerHeight)
winHeight = window.innerHeight;
sinon si ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//Détectez le corps en pénétrant profondément dans le document pour obtenir la taille de la fenêtre
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth ;
}
// Affiche les résultats dans deux zones de texte
document.form1.availHeight.value=winHeight;
document.form1.availWidth.value=winWidth;
}
findDimensions();
//Appelle la fonction et récupère la valeur
window.onresize=findDimensions;
//-->
</script>
</corps>
</html>
Interprétation du programme source
(1) Le programme crée d'abord un formulaire contenant deux zones de texte pour afficher la largeur et la hauteur actuelles de la fenêtre, et leurs valeurs changeront à mesure que la taille de la fenêtre change.
(2) Dans le code JavaScript suivant, deux variables winWidth et winHeight sont d'abord définies pour enregistrer les valeurs de hauteur et de largeur de la fenêtre.
(3) Ensuite, dans la fonction findDimensions(), utilisez window.innerHeight et window.innerWidth pour obtenir la hauteur et la largeur de la fenêtre, et enregistrez-les dans les deux variables susmentionnées.
(4) Détectez ensuite le corps en approfondissant le document, obtenez la taille de la fenêtre et stockez-la dans les deux variables mentionnées ci-dessus.
(5) À la fin de la fonction, en accédant aux éléments du formulaire par leur nom, les résultats sont affichés dans deux zones de texte.
(6) À la fin du code JavaScript, terminez toute l'opération en appelant la fonction findDimensions().