Qu'est-ce que la propriété offsetTop de l'élément HTML DOM en JavaScript

Qu Est Ce Que La Propriete Offsettop De L Element Html Dom En Javascript



L'élément HTML DOM ' décalageHaut ” évalue la position supérieure de l'élément HTML spécifié correspondant au document. Il s'agit d'une propriété spéciale en lecture seule HTML DOM qui peut souvent être utilisée avec d'autres propriétés de décalage JavaScript.

Cet article détaille le fonctionnement de la propriété 'offsetTop' en JavaScript.

Comment fonctionne la propriété HTML DOM 'offsetTop' en JavaScript ?

Le ' décalageHaut » La propriété fonctionne sur les éléments HTML et renvoie également la « marge », le « rembourrage » supérieur, la « bordure » et la « barre de défilement » de son élément parent.





Syntaxe



élément. décalageHaut

Dans cette syntaxe, ' élément ' indique la position supérieure de l'élément HTML particulier par rapport à la fenêtre d'affichage (une zone vide où le contenu de la page Web s'affiche).



Note: La valeur renvoyée inclut les éléments suivants :



  • position supérieure et la marge de l'élément.
  • bordure supérieure, barre de défilement et remplissage du parent.

Utilisons la syntaxe ci-dessus pratiquement.

Exemple : Application de la propriété 'offsetTop' pour évaluer la première position HTML

Cet exemple utilise le ' décalageHaut ” pour calculer la position supérieure de l'élément HTML particulier, c'est-à-dire “

” y compris sa marge en pixels.



Code HTML

Tout d'abord, parcourez le code HTML suivant :

< identifiant div = 'Div1' style = 'haut : 20 px ; position : relative ; marge : 15 px ; bordure : 3 px bleu-violet solide ; alignement du texte : centre ; rembourrage : 10 px ;' >

< b > Les détails de ce div sont : b >< Br >

haut : 20px < Br >

position : relatif < Br >

texte - aligner : centre < Br >

marge : 15px < Br >

frontière : 3px < Br >

div >< Br >

< bouton onclick = 'jsFunc()' > Cliquez dessus bouton >

< identifiant p = 'pour' > p >

Dans le code ci-dessus :

  • Le '
    ' L'élément est créé avec l'identifiant indiqué ' Div1 ' à côté du ' style ” propriété qui exécute le style indiqué.
  • Après cela, la section du corps de '
    ' spécifie les informations indiquées.
  • Ensuite, créez un bouton en utilisant le ' « tag ayant un associé » sur clic « événement pour exécuter la fonction » jsFunc() ” lors du clic sur le bouton.
  • Enfin, ajoutez un paragraphe vide via le '

    » pour afficher la première position calculée de l'élément «

    ».

Code Javascript

Maintenant, considérons le code JavaScript donné :

< scénario >

fonction jsFunc ( ) {

était elmnt = document. getElementById ( 'Div1' ) ;

où txt = 'OffsetTop calculé est : ' + orme. décalageHaut + 'px
' ;

document. getElementById ( 'pour' ) . innerHTML = SMS ;

}

scénario >

Dans les lignes de code ci-dessus :

  • La fonction est définie nommée ' jsFunc() ”.
  • Dans sa définition, la variable « orme ' est déclaré avec le ' était ' mot-clé qui utilise le ' getElementById() ' méthode pour accéder à la ' div ' incluse par son identifiant ' Div1 ”.
  • Après cela, appliquez le ' décalageHaut » dans la variable « txt » pour calculer la position supérieure du « div » récupéré en pixels.
  • Enfin, le 'getElementById ()' est appliqué à nouveau pour approcher le paragraphe vide ajouté et ajouter la valeur de position supérieure calculée de l'élément '
    ' dans le paragraphe via le ' innerHTML ' propriété.

Sortir

Dans ce résultat, on peut observer que la première position de la div donnée (y compris la marge), c'est-à-dire ' 35px ” est calculé conformément à la note spécifiée (au début du blog) et affiché lors du clic sur le bouton.

Conclusion

JavaScript fournit le ' décalageHaut ” propriété pour calculer la position supérieure de l'élément HTML par rapport à la fenêtre d'affichage. Il renvoie la position supérieure calculée d'un élément sous la forme d'une valeur entière dans ' pixels ”. Cet article a démontré l'objectif, l'utilisation et la mise en œuvre de la propriété 'offsetTop' de l'élément HTML DOM en JavaScript.

Autre

Catégorie

Articles Populaires

Comment convertir int en double en Java

Échange standard C++

ESP32 vs ESP8266 - Quel est le meilleur ?

Comment créer et déployer un service ECS dans AWS ?

Comment créer une table dynamiquement en JavaScript

Qu'est-ce que += en C++ ?

Est-il possible d'ajouter des propriétés nommées dynamiquement aux objets JavaScript ?

Fonction Basename() en langage C

Comment utiliser un symbole congruent LaTeX

CHMOD 777 : Syntaxe et fonction

Qu'est-ce que la réflexion dans Golang

Quelles sont les différentes versions d'ESP32

Un guide complet sur la tarification d'Amazon WorkMail

Comment utiliser la méthode « torch.argmax() » dans PyTorch ?

Comment régler l'alarme sur MacBook ?

Mes amis peuvent-ils voir le statut en ligne du PSN sur Discord ?

Comment utiliser la fonction CONCAT() dans MySQL ?

WMP écrase la pochette d'album et les miniatures de dossier. Comment l'arrêter? - Winhelponline

Qu'est-ce que la politique Robux sur les articles modérés de Roblox

Comment modifier le texte de l'étiquette à l'aide de JavaScript