HTMLImageElement : propriété x
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 x de l'interface HTMLImageElement indique la coordonnée x du bord gauche de l'élément HTML <img> par rapport à l'origine de l'élément racine.
Valeur
Un entier indiquant la distance en pixels entre le bord gauche de l'élément racine le plus proche au bord gauche de la boîte de bordure de l'élément <img>. L'élément racine le plus proche est l'élément <html> le plus à l'extérieur qui contient l'image. Si l'image est dans un élément HTML <iframe>, sa valeur x est relative à ce cadre.
Dans le schéma ci-dessous, le bord gauche correspond au bord gauche de la zone de remplissage bleue. La valeur retournée par x est donc la distance entre ce point et le bord gauche de la zone de contenu.
Exemples
L'exemple ci-dessous montre l'utilisation des propriétés x et y de HTMLImageElement.
HTML
<img id="avatar" src="/shared-assets/images/examples/grapefruit-slice.jpg" />
<pre id="journal"></pre>
JavaScript
Le code JavaScript ci-dessous récupère l'image et affiche ses valeurs x et y.
const boiteJournal = document.querySelector("pre");
const journaliser = (msg) => {
boiteJournal.innerText += `${msg}\n`;
};
const image = document.getElementById("avatar");
journaliser(`X global de l'image : ${image.x}`);
journaliser(`Y global de l'image : ${image.y}`);
Enfin, on affiche les valeurs des propriétés x et y de l'objet HTMLImageElement.
CSS
Le CSS qui définit la taille de l'image et sa position :
img {
margin-left: 30px;
margin-top: 20px;
max-width: 4em;
}
Résultat
L'image résultante ressemble à ceci :
Spécifications
| Spécification |
|---|
| CSSOM View Module # dom-htmlimageelement-x |
Compatibilité des navigateurs
Voir aussi
- La propriété
HTMLImageElement.y