HTMLImageElement : propriété x
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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
Loading…