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 seuleoffsetLeft de l'interfaceHTMLElement retourne le nombre de pixels de décalage ducoin supérieur gauche de l'élément courant vers la gauche à l'intérieur du nœudHTMLElement.offsetParent.

Pour les éléments de type bloc,offsetTop,offsetLeft,offsetWidth etoffsetHeight 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 etoffsetLeft décrivent la position de lapremière boîte de bordure (utilisezElement.getClientRects() pour obtenir sa largeur et sa hauteur), tandis queoffsetWidth etoffsetHeight décrivent les dimensions de la boîte de bordureenglobante (utilisezElement.getBoundingClientRect() pour obtenir sa position). Ainsi, une boîte avec la gauche, le haut, la largeur et la hauteur deoffsetLeft,offsetTop,offsetWidth etoffsetHeight 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.

Une phrase qui dit : Courte étendue. Ce texte est entièrement dans un bloc avec une bordure bleue. Une phrase qui dit : Longue étendue qui déborde dans ce bloc. Les mots « longue étendue qui déborde » sont dans une boîte à bordure rouge. Les mots « dans ce bloc » sont dans le bloc à bordure bleue.

html

<div>  <span>Courte étendue.</span>  <span>Longue étendue qui déborde dans ce bloc.</span></div><div></div>

css

.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`;