Supposons que obj soit un contrôle HTML
obj.offsetTop fait référence à la position supérieure calculée de obj par rapport à la mise en page ou à la coordonnée parent spécifiée par l'attribut offsetParent, entier, pixel unité.
obj.offsetLeft fait référence à la position gauche calculée d'obj par rapport à la mise en page ou à la coordonnée parent spécifiée par l'attribut offsetParent, entier, pixel unité.
obj.offsetWidth fait référence à la largeur absolue du contrôle obj lui-même, à l'exclusion de la partie non affichée en raison d'un débordement, c'est-à-dire la largeur qu'il occupe réellement, entier, unité de pixel.
obj.offsetHeight fait référence à la hauteur absolue du contrôle obj lui-même, à l'exclusion de la partie non affichée en raison d'un débordement, c'est-à-dire la hauteur qu'il occupe réellement, entier, unité de pixel.
Expliquons le offsetParent mentionné plus tôt.
offsetParent Obtient une référence à l'objet conteneur qui définit les propriétés offsetTop et offsetLeft de l'objet. offsetTop et offsetParent sont très compliqués, différents navigateurs ont des interprétations différentes et les interprétations sont différentes lorsqu'elles sont flottantes, nous avons donc généralement seulement besoin de comprendre que la position absolue du contrôle dans le navigateur peut être obtenue via les deux.
Les propriétés ci-dessus sont également valables dans FireFox.
De plus : ce dont nous parlons ici fait référence à la valeur d'attribut du contrôle HTML, et non à document.body. La valeur de document.body a des interprétations différentes selon les navigateurs (en fait, la plupart des environnements sont causés par des interprétations différentes du document. body, pas dû à des interprétations différentes du décalage)
Nous savons que offsetTop peut obtenir la position de l'élément HTML à partir de l'élément supérieur ou externe, et style.top peut également être utilisé. La différence entre les deux est :
1. offsetTop renvoie un nombre, tandis que style.top renvoie une chaîne En plus du nombre, il a également l'unité : px.
2. offsetTop est en lecture seule, tandis que style.top est accessible en lecture et en écriture.
3. Si le style top n'est pas spécifié pour l'élément HTML, style.top renvoie une chaîne vide.
Il en va de même pour offsetLeft et style.left, offsetWidth et style.width, offsetHeight et style.height.
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.
illustrer
Ce qui précède est basé sur DTD HTML 4.01 Transitional. S'il s'agit de DTD XHTML 1.0 Transitional, la signification sera différente en XHTML, ces trois valeurs sont toutes la même valeur, indiquant la hauteur réelle du contenu. La plupart des nouvelles versions des navigateurs prennent en charge l'activation de différents interpréteurs basés sur le DOCTYPE spécifié sur la page.
scrollTop est la valeur de hauteur "roulée", exemple :
Copiez le code comme suit :
<identifiant div="p">
<div id="t">Si scrollTop est défini pour p, ces contenus peuvent ne pas être entièrement affichés. </div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10 ;
</script>
Puisque scrollTop est défini pour l'élément externe p, l'élément interne défilera vers le haut et la partie enroulée sera scrollTop.
scrollLeft est similaire.
Nous savons déjà que offsetHeight est la largeur de son propre élément et scrollHeight est la largeur absolue de l'élément interne, y compris la partie cachée de l'élément interne. Dans ce qui précède, la scrollHeight de p est de 300 et la offsetHeight de p est de 100.
scrollWidth est similaire.
IE et FireFox le prennent entièrement en charge, tandis que Netscape 8 et Opera 7.6 ne prennent pas en charge scrollTop et scrollLeft (sauf document.body.scrollTop et document.body.scrollLeft).
1.clientHeight, clientWidth :
Ces deux propriétés montrent grossièrement la hauteur et la largeur des pixels du contenu de l'élément. Théoriquement, ces mesures ne prennent pas en compte celles ajoutées via la feuille de style.
Marges, bordures, etc. dans les éléments.
2.clientLeft,clientTop :
Ces deux renvoient l'épaisseur de la bordure autour de l'élément. Si vous ne spécifiez pas de bordure ou ne positionnez pas l'élément, sa valeur est 0.
3.scrollLeft, scrollTop :
Si l'élément peut défiler, vous pouvez utiliser ces deux propriétés pour connaître la distance parcourue par l'élément dans les directions horizontale et verticale. L'unité est le pixel.
Pour les éléments qui ne défilent pas, ces valeurs sont toujours 0.
4. scrollHeight, scrollWidth :
Peu importe le nombre d’objets visibles sur la page, ils obtiennent le tout.
5.style.gauche :
Le décalage de l'élément positionné par rapport au bord gauche du rectangle contenant
6.style.pixelLeft :
Renvoie la valeur entière en pixels du décalage de la bordure gauche de l'élément positionné. Parce que la valeur non-pixel de l'attribut renvoie une chaîne contenant l'unité, par exemple 30px, utilisez cet attribut pour gérer les valeurs en pixels séparément.
7.style:posLetf :
Renvoie la valeur numérique du décalage de la bordure gauche de l'élément positionné, quelles que soient les unités spécifiées par l'élément de feuille de style correspondant. Parce que la valeur de non-position de l'attribut renvoie une chaîne contenant l'unité, par exemple 1.2em.
Quelques analogies comme top, pixelTop, posTop suffiront.
GAUCHE : est la position déplacée de gauche à droite, c'est-à-dire la distance entre le pendentif et le bord gauche de l'écran ;
clientLeft renvoie la distance entre la valeur de la propriété offsetLeft de l'objet et la valeur réelle sur le côté gauche de la fenêtre actuelle.
offsetLeft renvoie la valeur gauche de l'objet par rapport à la disposition ou aux coordonnées de l'objet parent. Il prend le coin supérieur gauche de l'objet parent comme origine des coordonnées, et la droite et le bas sont les coordonnées x dans la direction positive de. les axes X et Y.
pixelLeft définit ou renvoie la position de l'objet par rapport au côté gauche de la fenêtre
scrollWidth est la largeur du contenu réel de l'objet, à l'exclusion de la largeur des bords, et changera avec la quantité de contenu dans l'objet (trop de contenu peut modifier la largeur réelle de l'objet).
clientWidth est la largeur visible de l'objet, à l'exclusion des barres de défilement et autres bords, et changera en fonction de la taille d'affichage de la fenêtre.
offsetWidth est la largeur visible de l'objet, y compris les barres de défilement et autres bords, et changera en fonction de la taille d'affichage de la fenêtre.
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)
offsetwidth : est la largeur de décalage de l'élément par rapport à l'élément parent. Égal à bordure+padding+largeur
clientwidth : est la largeur visible de l'élément. Égal à remplissage+largeur
scrollwidth : est la largeur de l'élément, y compris la partie défilante.
offsetLeft : la position de l'élément HTML par rapport à son propre élément offsetParent
scrollLeft : renvoie et définit la valeur des coordonnées de la tâche de défilement horizontal actuelle
Copiez le code comme suit :
<input type="button" value="Click" onclick="move()">
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="hauteur:600;largeur:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<langage de script="javascript">
fonction déplacer()
{
var d=document.getElementById("d")
a=évaluation(20)
d.scrollLeft+=a
}
</script>
Enregistrez en tant que page Web, exécutez-la, cliquez sur le bouton et la barre de défilement se déplace
Cliquez sur le div, affichez d'abord la position de b par rapport à a, puis affichez la position de a par rapport à la fenêtre.