décalageHaut
Obtient la position supérieure calculée de l'objet par rapport à la présentation ou aux coordonnées parent spécifiées par la propriété offsetParent.
décalageGauche
Obtient la position gauche calculée de l'objet par rapport à la disposition ou aux coordonnées parent spécifiées par la propriété offsetParent.
décalageHauteur
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.
IE et Opera pensent que offsetHeight = clientHeight + barre de défilement + bordure.
NS et FF considèrent offsetHeight comme la hauteur réelle du contenu de la page Web, qui peut être inférieure à clientHeight.
décalageLargeur
Obtient la largeur de l'objet par rapport à la mise en page ou à la coordonnée parent spécifiée par la propriété offsetParent.
offsetParent
Obtient une référence à l'objet conteneur qui définit les propriétés offsetTop et offsetLeft de l'objet.
clientHauteur
Obtient la hauteur d'un objet, sans compter les marges, bordures, barres de défilement ou remplissage qui pourraient être appliqués à l'objet.
Tout le monde n'a aucune objection à clientHeight. Ils pensent tous que c'est la hauteur de la zone visible du contenu, c'est-à-dire la hauteur de la zone où le contenu peut être vu dans le navigateur de page. est la zone située sous la dernière barre d'outils et au-dessus de la barre d'état. Cela n'a rien à voir avec le contenu de la page.
clientGauche
Obtient la distance entre la propriété offsetLeft et le côté gauche réel de la zone client.
clientHaut
Obtient la distance entre la propriété offsetTop et le haut réel de la zone client.
clientLargeur
Obtient la largeur d'un objet, sans compter les marges, bordures, barres de défilement ou remplissage qui pourraient être appliqués à l'objet.
Attribut SCROLL
rouleau
Définit ou obtient si le défilement est désactivé.
hauteur de défilement
Obtenez la hauteur de défilement de l'objet.
faire défiler vers la gauche
Définit ou obtient la distance entre le bord gauche de l'objet et le bord le plus à gauche du contenu actuellement visible dans la fenêtre.
faire défiler vers le haut
Définit ou obtient la distance entre le haut de l'objet et le haut du contenu visible dans la fenêtre.
largeur de défilement
Obtient la largeur de défilement de l'objet. attribut d'événement
x
Définit ou obtient la coordonnée x-pixel de la position du pointeur de la souris par rapport au document parent.
écranX
Définit ou obtient la coordonnée x de la position du pointeur de la souris par rapport à l'écran de l'utilisateur
décalageX
Définit ou obtient la coordonnée X de la position du pointeur de la souris par rapport à l'objet qui a déclenché l'événement.
clientX
Définit ou obtient la coordonnée x de la position du pointeur de la souris par rapport à la zone client de la fenêtre, où la zone client n'inclut pas les propres contrôles et barres de défilement de la fenêtre.
Nous parlons ici de l'interprétation de clientHeight, offsetHeight et scrollHeight de document.body par quatre navigateurs. Il s'agit de document.body. S'il s'agit d'un contrôle HTML, c'est différent.
Ces quatre navigateurs sont IE (Internet Explorer), NS (Netscape), Opera et FF (FireFox).
clientHauteur
Tout le monde n'a aucune objection à clientHeight. Ils pensent tous que c'est la hauteur de la zone visible du contenu, c'est-à-dire la hauteur de la zone où le contenu peut être vu dans le navigateur de page. est la zone située sous la dernière barre d'outils et au-dessus de la barre d'état. Cela n'a rien à voir avec le contenu de la page.
décalageHauteur
IE et Opera pensent que offsetHeight = clientHeight + barre de défilement + bordure. NS et FF considèrent offsetHeight comme la hauteur réelle du contenu de la page Web, qui peut être inférieure à clientHeight.
hauteur de défilement
IE et Opera considèrent scrollHeight comme la hauteur réelle du contenu de la page Web, qui peut être inférieure à clientHeight. NS et FF considèrent scrollHeight comme la hauteur du contenu de la page Web, mais la valeur minimale est clientHeight. En termes simples
clientHeight est la hauteur de la zone où le contenu est affiché via le navigateur.
NS et FF pensent que offsetHeight et scrollHeight sont tous deux des hauteurs de contenu Web, mais lorsque la hauteur du contenu Web est inférieure ou égale à clientHeight, la valeur de scrollHeight est clientHeight et offsetHeight peut être inférieure à clientHeight.
IE et Opera considèrent offsetHeight comme la barre de défilement clientHeight de la zone visible plus la bordure. scrollHeight est la hauteur réelle du contenu de la page Web.
Même raison
Les explications de clientWidth, offsetWidth et scrollWidth sont les mêmes que ci-dessus, remplacez simplement la hauteur par la largeur.
mais
FF interprète clientHeight différemment dans différents DOCTYPEs, mais xhtml 1 transitional ne l'interprète pas comme ci-dessus. Les autres navigateurs n'ont pas ce problème.
js obtient la hauteur de la page
Copiez le code comme suit :
<script>
fonction getInfo()
{
vars = "";
s += "Largeur de la zone visible de la page Web :"+ document.body.clientWidth;
s += "La hauteur de la zone visible de la page Web :"+ document.body.clientHeight;
s += "La largeur de la zone visible de la page Web : "+ document.body.offsetWidth + " (y compris la largeur des bords et des barres de défilement)" ;
s += "La hauteur de la zone visible de la page Web : "+ document.body.offsetHeight + " (y compris la largeur du bord)" ;
s += "Largeur du texte intégral du texte de la page Web :"+ document.body.scrollWidth;
s += "Hauteur du texte intégral du corps de la page Web :"+ document.body.scrollHeight;
s += "La hauteur à laquelle la page Web défile (ff) :"+ document.body.scrollTop;
s += "La hauteur à laquelle la page Web défile (c'est-à-dire) :"+ document.documentElement.scrollTop;
s += "Le côté gauche de la page Web défile :"+ document.body.scrollLeft;
s += "Sur le corps principal de la page Web : "+ window.screenTop;
s += "À gauche de la partie texte de la page Web :"+ window.screenLeft;
s += "La hauteur de la résolution de l'écran :"+ window.screen.height;
s += "Largeur de résolution d'écran :"+ window.screen.width;
s += "Hauteur de la zone de travail disponible à l'écran :"+ window.screen.availHeight;
s += "Largeur de la zone de travail disponible à l'écran :"+ window.screen.availWidth;
s += "Votre paramètre d'écran est "+ window.screen.colorDepth +" bit color";
s += "Paramètres de votre écran" + window.screen.deviceXDPI +" Pixels/pouces";
//alerte(s);
}
getInfo();
</script>
Dans mon test local :
Peut être utilisé sous IE, FireFox, Opera
document.body.clientWidth
document.body.clientHeight
C'est disponible, c'est simple, c'est pratique.
Et parmi les projets d'entreprise :
Opera utilise toujours
document.body.clientWidth
document.body.clientHeight
Mais IE et FireFox utilisent
document.documentElement.clientWidth
document.documentElement.clientHeight
Il s’avère que les normes du W3C posent problème.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Si vous ajoutez cette ligne de balises à la page
Dans IE :
document.body.clientWidth ==> Largeur de l'objet BODY
document.body.clientHeight ==> Hauteur de l'objet BODY
document.documentElement.clientWidth ==> Largeur de la zone visible
document.documentElement.clientHeight ==> Hauteur de la zone visible
Dans FireFox :
document.body.clientWidth ==> Largeur de l'objet BODY
document.body.clientHeight ==> Hauteur de l'objet BODY
document.documentElement.clientWidth ==> Largeur de la zone visible
document.documentElement.clientHeight ==> Hauteur de la zone visible
Dans Opéra :
document.body.clientWidth ==> Largeur de la zone visible
document.body.clientHeight ==> Hauteur de la zone visible
document.documentElement.clientWidth ==> Largeur de l'objet de page (c'est-à-dire la largeur de l'objet BODY plus la largeur de la marge)
document.documentElement.clientHeight ==> Hauteur de l'objet de la page (c'est-à-dire la hauteur de l'objet BODY plus la hauteur de la marge)
Et s'il n'y a pas de norme W3C définie, alors
IE est :
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox est :
document.documentElement.clientWidth ==> Largeur de l'objet de page (c'est-à-dire la largeur de l'objet BODY plus la largeur de la marge) document.documentElement.clientHeight ==> Hauteur de l'objet de la page (c'est-à-dire la hauteur de l'objet BODY plus la hauteur de la marge)
L'Opéra c'est :
document.documentElement.clientWidth ==> Largeur de l'objet de page (c'est-à-dire la largeur de l'objet BODY plus la largeur de la marge) document.documentElement.clientHeight ==> Hauteur de l'objet de la page (c'est-à-dire la hauteur de l'objet BODY plus la hauteur de la marge)
C'est vraiment une chose gênante. En fait, du point de vue du développement, il serait beaucoup plus pratique d'avoir moins d'objets et de méthodes et de ne pas utiliser les derniers standards.