HTMLImageElement: x-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die schreibgeschützte x-Eigenschaft der HTMLImageElement-Schnittstelle gibt die x-Koordinate des linken Randes des <img>-Elements relativ zum Ursprung des Wurzelelements an.
Die x- und y-Eigenschaften sind nur für ein Bild gültig, wenn seine display-Eigenschaft den berechneten Wert table-column oder table-column-group hat. Mit anderen Worten: Es hat entweder explizit einen dieser Werte gesetzt, es hat ihn von einem enthaltenen Element geerbt, oder es befindet sich innerhalb einer Spalte, die entweder durch <col> oder <colgroup> beschrieben wird.
Wert
Ein ganzzahliger Wert, der den Abstand in Pixeln vom linken Rand des nächstgelegenen Wurzelelements und dem linken Rand der Randbox des <img>-Elements angibt. Das nächstgelegene Wurzelelement ist das äußerste <html>-Element, das das Bild enthält. Wenn sich das Bild in einem <iframe> befindet, ist sein x relativ zu diesem Frame.
Im Diagramm unten ist der linke Rand die linke Kante des blauen Polsterbereichs. Der von x zurückgegebene Wert wäre also der Abstand von diesem Punkt zur linken Kante des Inhaltsbereichs.
Beispiel
Das folgende Beispiel demonstriert die Verwendung der HTMLImageElement-Eigenschaften x und y.
HTML
In diesem Beispiel sehen wir eine Tabelle, die Informationen über Benutzer einer Website zeigt, einschließlich ihrer Benutzer-ID, ihres vollständigen Namens und ihres Avatar-Bildes.
<table id="userinfo">
<colgroup>
<col span="2" class="group1" />
<col />
</colgroup>
<tr>
<th>UserID</th>
<th>Name</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
Der JavaScript-Code, der das Bild aus der Tabelle abruft und seine x- und y-Werte nachschlägt, ist unten aufgeführt.
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(`Image's global X: ${image.x}`);
log(`Image's global Y: ${image.y}`);
Dies verwendet die rows-Eigenschaft des <table>, um eine Liste der Zeilen in der Tabelle zu erhalten, aus der Zeile 1 (was, da es sich um einen Null-basierten Index handelt, die zweite Zeile von oben bedeutet) nachgeschlagen wird. Dann wird auf die cells-Eigenschaft des <tr> (Tabellenzeile)-Elements zugegriffen, um eine Liste der Zellen in dieser Zeile zu erhalten. Die dritte Zelle wird aus dieser Zeile genommen (wobei erneut 2 als Null-basierter Offset angegeben wird).
Von dort aus können wir das <img>-Element selbst aus der Zelle abrufen, indem wir querySelector() auf das die Zelle darstellende HTMLTableCellElement aufrufen.
Schließlich können die Werte der x- und y-Eigenschaften des HTMLImageElement nachgeschlagen und angezeigt werden.
CSS
Das CSS, das das Erscheinungsbild der Tabelle definiert:
.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;
}
Ergebnis
Die resultierende Tabelle sieht so aus:
Spezifikationen
| Specification |
|---|
| CSSOM View Module # dom-htmlimageelement-x |