HTMLElement : propriété offsetLeft
Baseline
Widely available
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 offsetLeft de l'interface HTMLElement retourne le nombre de pixels de décalage du coin supérieur gauche de l'élément courant vers la gauche à l'intérieur du nœud HTMLElement.offsetParent.
Pour les éléments de type bloc, offsetTop, offsetLeft, offsetWidth et offsetHeight décrivent la boîte de bordure de l'élément par rapport à l'offsetParent.
Cependant, pour les éléments en ligne (comme une étendue) qui peuvent passer d'une ligne à l'autre, offsetTop et offsetLeft décrivent la position de la première boîte de bordure (utilisez Element.getClientRects() pour obtenir sa largeur et sa hauteur), tandis que offsetWidth et offsetHeight décrivent les dimensions de la boîte de bordure englobante (utilisez Element.getBoundingClientRect() pour obtenir sa position). Ainsi, une boîte avec la gauche, le haut, la largeur et la hauteur de offsetLeft, offsetTop, offsetWidth et offsetHeight ne sera pas une boîte englobante pour une étendue (span) avec un retour à la ligne.
Valeur
Un entier.
Exemple
const colorTable = document.getElementById("t1");
const tOLeft = colorTable.offsetLeft;
if (tOLeft > 5) {
// grand décalage à gauche : faire quelque chose ici
}
Cet exemple montre une « longue » phrase qui déborde dans un bloc avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites de l'étendue.
<div class="span-container">
<span>Courte étendue.</span>
<span id="long-span">Longue étendue qui déborde dans ce bloc.</span>
</div>
<div id="box"></div>
.span-container {
width: 300px;
border-color: blue;
border-style: solid;
border-width: 1px;
}
#box {
position: absolute;
border-color: red;
border-width: 1px;
border-style: solid;
z-index: 10;
}
const box = document.getElementById("box");
const longSpan = document.getElementById("long-span");
box.style.left = `${longSpan.offsetLeft}${document.body.scrollLeft}px`;
box.style.top = `${longSpan.offsetTop}${document.body.scrollTop}px`;
box.style.width = `${longSpan.offsetWidth}px`;
box.style.height = `${longSpan.offsetHeight}px`;
Spécifications
| Specification |
|---|
| CSSOM View Module # dom-htmlelement-offsetleft |
Compatibilité des navigateurs
Voir aussi
- Déterminer les dimensions des éléments
- La propriété
Element.clientLeft - La propriété
Element.scrollLeft - La propriété
HTMLElement.offsetHeight - La propriété
HTMLElement.offsetWidth - La propriété
HTMLElement.offsetTop - La méthode
Element.getBoundingClientRect()