Derniers tutoriels de développement web
 

Element offsetTop Property

<Object Élément

Exemple

Obtenez la position offsetTop d'un <div> élément:

<div id="test">
<p>Click the button to get offsetTop for the test div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p>offsetTop is: <span id="demo"></span></p>
</div>

<script>
function myFunction() {
    var testDiv = document.getElementById("test");
    document.getElementById("demo").innerHTML = testDiv.offsetTop;
}
</script>
Essayez vous - même »

Définition et utilisation

La propriété offsetTop revient en position haute (in pixels) par rapport à la partie supérieure de l'élément offsetParent.

La valeur retournée comprend:

  • la position supérieure, et la marge de l'élément
  • le rembourrage supérieur, barre de défilement et bordure de l'élément offsetParent

Remarque: Le offsetParent élément est le plus proche ancêtre qui a une position autre que statique.

Astuce: Pour revenir la position gauche d'un élément, utilisez la offsetLeft propriété.


Support du navigateur

Propriété
offsetTop Oui 8.0 Oui Oui Oui

Syntaxe

Retourne la position offset supérieure:

object .offsetTop

Détails techniques

Valeur par défaut: aucune valeur par défaut
Valeur de retour: Un nombre, représentant la position supérieure de l'élément, en pixels
DOM Version: CSSOM

autres exemples

Exemple

Obtenez la position aa <div> élément:

<div id="test">
<p>Click the button to get the left and top offsets for the test div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p id="demo">offsetLeft: <br>offsetTop: </p>
</div>
<script>
function myFunction() {
    var testDiv = document.getElementById("test");
    var demoDiv = document.getElementById("demo");
    demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
}
</script>
Essayez vous - même »


<Object Élément