HTMLImageElement : propriété x
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 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.
Les propriétés x et y ne sont valides pour une image que si sa propriété display a pour valeur calculée table-column ou table-column-group. Cela signifie que l'une de ces valeurs est définie explicitement, héritée d'un élément parent, ou appliquée parce que l'image se trouve dans une colonne définie par <col> ou <colgroup>.
Valeur
Un entier indiquant la distance en pixels entre le bord gauche de l'élément racine le plus proche et le 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.
Note :
La propriété x n'est valide que si la valeur calculée de la propriété display de l'image est table-column ou table-column-group : soit l'une de ces valeurs est définie directement sur l'élément <img>, soit elle est héritée d'un parent, soit l'image se trouve dans une colonne définie par <col> ou <colgroup>.
Exemple
L'exemple ci-dessous montre l'utilisation des propriétés x et y de HTMLImageElement.
HTML
Dans cet exemple, un tableau affiche des informations sur des utilisateur·ice·s d'un site web, dont leur identifiant, leur nom complet et leur avatar.
<table id="userinfo">
<colgroup>
<col span="2" class="group1" />
<col />
</colgroup>
<tr>
<th>Identifiant utilisateur</th>
<th>Nom</th>
<th>Avatar</th>
</tr>
<tr>
<td>12345678</td>
<td>Johnny Rocket</td>
<td>
<img src="/shared-assets/images/examples/grapefruit-slice.jpg" />
</td>
</tr>
</table>
<pre id="log"></pre>
JavaScript
Le code JavaScript ci-dessous récupère l'image du tableau et affiche ses valeurs x et y.
const logBox = document.querySelector("pre");
const tbl = document.getElementById("userinfo");
const log = (msg) => {
logBox.innerText += `${msg}\n`;
};
const cell = tbl.rows[1].cells[2];
const image = cell.querySelector("img");
log(`X global de l'image : ${image.x}`);
log(`Y global de l'image : ${image.y}`);
Ce code utilise la propriété rows de l'élément <table> pour obtenir la liste des lignes du tableau.
Il sélectionne la ligne d'index 1 (c'est-à-dire la deuxième ligne à partir du haut, car l'indexation commence à 0).
Ensuite, il regarde l'élément <tr> correspondant et utilise la propriété cells pour obtenir la liste des cellules de cette ligne.
La troisième cellule (index 2) est sélectionnée.
À partir de là, on récupère l'élément <img> de la cellule en appelant un querySelector() sur l'élément HTMLTableCellElement correspondant.
Enfin, on affiche les valeurs des propriétés x et y de l'objet HTMLImageElement.
CSS
Le CSS qui définit l'apparence du tableau :
.group1 {
background-color: #d7d9f2;
}
table {
border-collapse: collapse;
border: 2px solid rgb(100 100 100);
font-family: sans-serif;
}
td,
th {
border: 1px solid rgb(100 100 100);
padding: 10px 14px;
}
td > img {
max-width: 4em;
}
Résultat
Le tableau résultant ressemble à ceci :
Spécifications
| Specification |
|---|
| CSSOM View Module # dom-htmlimageelement-x |
Compatibilité des navigateurs
Chargement…