HTMLImageElement: x-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die schreibgeschützte Eigenschaft x der Schnittstelle HTMLImageElement gibt die x-Koordinate der linken Rahmenkante des <img>-Elements relativ zum Ursprung des Wurzelelements an.
Wert
Ein ganzzahliger Wert, der den Abstand in Pixeln zwischen der linken Kante des nächstgelegenen Wurzelelements und der linken Kante der Rahmenbox des <img>-Elements angibt. Das nächstgelegene Wurzelelement ist das äußerste <html>-Element, das das Bild enthält. Befindet sich das Bild in einem <iframe>, ist sein x-Wert relativ zu diesem Frame.
Im folgenden Diagramm ist die linke Rahmenkante die linke Kante des blauen Innenabstandsbereichs. Der von x zurückgegebene Wert wäre also der Abstand von diesem Punkt zur linken Kante des Inhaltsbereichs.
Beispiele
Das folgende Beispiel zeigt die Verwendung der HTMLImageElement-Eigenschaften x und y.
HTML
<img id="avatar" src="/shared-assets/images/examples/grapefruit-slice.jpg" />
<pre id="log"></pre>
CSS
Das CSS legt die Größe und Position des Bildes fest:
img {
margin-left: 30px;
margin-top: 20px;
max-width: 4em;
}
JavaScript
Der folgende JavaScript-Code ruft das Bild ab und ermittelt seine x- und y-Werte.
const logBox = document.querySelector("pre");
const log = (msg) => {
logBox.innerText += `${msg}\n`;
};
const image = document.getElementById("avatar");
log(`Image's global X: ${image.x}`);
log(`Image's global Y: ${image.y}`);
Abschließend können wir die Werte der x- und y-Eigenschaften des HTMLImageElement ermitteln und anzeigen.
Ergebnis
Das Ergebnis sieht so aus:
Spezifikationen
| Spezifikation |
|---|
| CSSOM View Module # dom-htmlimageelement-x |