La largeur de zone visible de la page Web: document.body.clientwidth
La hauteur de zone visible de la page Web: document.body.clientheight
La largeur de zone visible de la page Web: document.body.offsetwidth (y compris la largeur de la ligne de bord)
La hauteur de zone visible de la page Web: document.body.offsetheight (y compris la largeur de la ligne de bord)
Largeur du texte complet de la page Web: document.body.scrollwidth
Texte complet de la page Web: document.body.scrollheight
La page Web est déployée à un niveau élevé: document.body.scrolltop
La gauche de la page Web est déployée: document.body.scrollleft
Sur la partie principale de la page Web: Window.Screentop
Gauche du texte principal de la page Web: fenêtre.screenleft
Résolution à haut écran: fenêtre.Screen.Height
Largeur de la résolution d'écran: window.screen.width
Écran disponible sur l'espace de travail Hauteur: Window.Screen.AvailHeight
Écran Disponible Espace de travail Largeur: Window.Screen.AvailWidth
HTML Position précise: Scrollleft, ScrollWidth, ClientWidth, OffsetWidth
ScrollHeight: obtient la hauteur de défilement de l'objet.
Scrollleft: définissez ou obtenez la distance entre la limite gauche de l'objet et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre
ScrollTop: définissez ou obtenez la distance entre le haut de l'objet et le haut du contenu visible dans la fenêtre
ScrollWidth: Obtenez la largeur de défilement de l'objet
Offsetheight: obtient la hauteur de l'objet par rapport à la disposition ou à la coordonnée parent spécifiée par la propriété OffsetParent coordonnée parentale
Offsetleft: obtient la position gauche calculée de l'objet par rapport à la disposition 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 disposition ou à la coordonnée parent spécifiée par la propriété Offsettop
event.clientx coordonnées horizontales par rapport au document
Event.Clienty Coordonnées verticales par rapport au document
event.offsetx coordonnées horizontales par rapport au conteneur
event.offsety Coordonnées verticales par rapport au conteneur
document.DocumentElement.ScrollTop La valeur du défilement verticalement
event.clientx + document.DocumentElement.ScrollTop par rapport à la coordonnée horizontale du document + la quantité de défilement dans la direction verticale
C'est-à-dire, les différences de Firefox sont les suivantes:
IE6.0, FF1.06 +:
ClientWidth = largeur + rembourrage
ClientHeight = hauteur + rembourrage
OffsetWidth = largeur + rembourrage + bordure
offSetheight = hauteur + rembourrage + bordure
IE5.0 / 5.5:
ClientWidth = Largeur - Border
ClientHeight = Height - Border
OffsetWidth = Largeur
offsetheight = hauteur
(Il convient de mentionner que l'attribut de marge dans CSS n'a rien à voir avec la largeur de client
－－－－－－－－－－－－－－－－－－－－－－－－－－
Faits saillants techniques
Le code de cette section utilise principalement certaines propriétés de l'objet de document sur la fenêtre.
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 vraie taille de la fenêtre, vous devez utiliser les attributs de la fenêtre sous NetScape; Le corps; dans l'environnement DOM, si vous voulez 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 interne de la fenêtre actuelle. La propriété Innerheight de l'objet Window contient la hauteur interne de la fenêtre actuelle.
L'attribut corporel de l'objet document correspond à la balise du document HTML. La propriété DocumentElement de l'objet de 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ù réside le document HTML.
Code d'implémentation <! - œllois - `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `�
La copie de code est la suivante:
<! 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">
<adal>
<Title> Veuillez ajuster la fenêtre du navigateur </TITME>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312">
</ head>
<body>
<h2 align = "Center"> Veuillez régler la taille de la fenêtre du navigateur </h2> <hr>
<form action = "#" méthode = "get" name = "form1" id = "form1">
<! Afficher la taille réelle de la fenêtre du navigateur>
La hauteur réelle de la fenêtre du navigateur: <input type = "text" name = "sailheight" size = "4"> <br>
La largeur réelle de la fenêtre du navigateur: <entrée type = "text" name = "vawidth" size = "4"> <br>
</ form>
<script type = "text / javascript">
<!
var winwidth = 0;
var winheight = 0;
fonction finddimensions () // fonction: obtenez les dimensions
{
// Obtenez la largeur de la fenêtre
if (window.innerwidth)
winwidth = window.innerwidth;
else if ((document.body) && (document.body.clientwidth)))
winwidth = document.body.clientwidth;
// Obtenez la hauteur de la fenêtre
if (window.innerheight)
winheight = window.innerheight;
else if ((document.body) && (document.body.clientheight)))
winheight = document.body.clientHeight;
// cliquez sur la taille de la fenêtre en détectant le corps au fond du document pour obtenir la taille du corps
if (document.DocumentElement && document.documentElement.ClientHeight && document.DocumentElement.ClientWidth)
{
winHeight = document.DocumentElement.ClientHeight;
winwidth = document.DocumentElement.ClientWidth;
}
// Le résultat est sorti à deux zones de texte
document.form1.availheight.value = winHeight;
document.form1.availwidth.value = winwidth;
}
finddimensions ();
// appelle la fonction pour obtenir la valeur
window.onresize = findimensions;
///
</cript>
</docy>
</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 sa valeur changera avec le changement de la taille de la fenêtre.
(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 enregistrer les deux dans les deux variables ci-dessus.
(4) Ensuite, en entrant profondément dans le document, en détectant le corps, en obtenant la taille de la fenêtre et en le stockant dans les deux variables ci-dessus.
(5) À la fin de la fonction, le résultat est sorti en deux zones de texte en accédant à l'élément de forme par nom.
(6) À la fin du code JavaScript, complétez toute l'opération en appelant la fonction finddimensions ().