Element : propriété clientTop
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété en lecture seule clientTop de l'interface Element retourne la largeur de la bordure supérieure d'un élément en pixels.
Tout ce qui se trouve entre offsetTop et clientTop est la bordure de l'élément. En effet, offsetTop indique l'emplacement du haut de la bordure (et non de la marge) tandis que la zone client commence immédiatement sous la bordure, en incluant le remplissage. Par conséquent, la valeur de clientTop est toujours égale à border-top-width, arrondie à l'entier le plus proche. Par exemple, si la valeur calculée de border-top-width est nulle, alors clientTop est également nul.
Valeur
Un entier.
Exemples
Dans l'exemple suivant, la zone client présente un fond blanc et une border-top noire de 24px. La valeur clientTop correspond à la distance entre la fin de la zone de marge (en jaune) et le début des zones de remplissage et de contenu (en blanc) : soit 24px.
HTML
<div id="conteneur">
<div id="contenu">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
</div>
CSS
#conteneur {
margin: 3rem;
background-color: rgb(255 255 204);
border: 4px dashed black;
}
#contenu {
margin: 1rem;
border-top: 24px black solid;
padding: 0px 28px;
overflow: auto;
background-color: white;
}
Résultat
Spécifications
| Spécification |
|---|
| CSSOM View Module # dom-element-clienttop |
Compatibilité des navigateurs
Voir aussi
- Déterminer les dimensions des éléments
- La propriété
HTMLElement.offsetTop - La propriété
Element.scrollTop - La propriété
Element.clientHeight - La propriété
Element.clientWidth - La propriété
Element.clientLeft - La méthode
Element.getBoundingClientRect()