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 x Eigenschaft der HTMLImageElement-Schnittstelle zeigt die x-Koordinate der linken Rahmenkante des <img>-Elements relativ zum Ursprung des Wurzelelements an.
Wert
Ein Ganzzahlwert, der den Abstand in Pixel vom linken Rand des nächstgelegenen Wurzelelements zur linken Kante des Rahmenkastens 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 dessen x relativ zu diesem Rahmen.
Im nachstehenden Diagramm ist die linke Rahmenkante der linke Rand des blauen Polsterbereichs. Der von x zurückgegebene Wert wäre also der Abstand von diesem Punkt bis zum linken Rand des Inhaltsbereichs.
Beispiele
Das folgende Beispiel demonstriert die Verwendung der HTMLImageElement-Eigenschaften x und y.
HTML
<img id="avatar" src="/shared-assets/images/examples/grapefruit-slice.jpg" />
<pre id="log"></pre>
JavaScript
Der JavaScript-Code, der das Bild abruft und seine x- und y-Werte ermittelt, ist unten dargestellt.
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}`);
Schließlich können wir die Werte der HTMLImageElement-Eigenschaften x und y ermitteln und anzeigen.
CSS
Das CSS, das die Bildgröße und seine Position definiert:
img {
margin-left: 30px;
margin-top: 20px;
max-width: 4em;
}
Ergebnis
Das resultierende Bild sieht folgendermaßen aus:
Spezifikationen
| Spezifikation |
|---|
| CSSOM View Module # dom-htmlimageelement-x |