CSSImageValue

Instanzeigenschaften

Keine.

Instanzmethoden

Erbt auch Methoden von seiner Elternschnittstelle, CSSStyleValue.

Beschreibung

CSSImageValue kann jede Art von Wert enthalten, die der <image> Datentyp akzeptiert, einschließlich URL-basierter Bilder, die mit url() spezifiziert sind, <gradient>s wie linear-gradient(), image(), image-set(), cross-fade() und element().

Für Bildwerte, die eine URL beinhalten, wie url() oder image(), werden relative und Fragment-URLs auf die gleiche Weise aufgelöst wie in CSS. Das heißt, relativ zur URL des Stylesheets oder zur URL des Dokuments bei inline Stilen.

Diese Auflösung erfolgt während der Werteberechnung und nicht zur Parserzeit, was bedeutet, dass der Wert eines CSSImageValue davon abhängt, ob Sie mit dem spezifizierten Wert oder dem berechneten Wert arbeiten:

• Ein spezifizierter Wert hat eine nicht aufgelöste relative URL. Wenn der nicht aufgelöste Wert auf ein Element in einem anderen Dokument kopiert wird, wird er relativ zur Basis-URL des Ziel-Dokuments aufgelöst und kann auf eine andere Ressource verweisen.
• Ein berechneter Wert wurde bereits zu einer absoluten URL aufgelöst, so dass er konsistent verhält, egal in welches Dokument er später angewendet wird.
• Ein nur-aus-Fragment bestehender URL-Wert wird immer relativ zum aktuellen Dokument aufgelöst.

Beachten Sie, dass CSSImageValue-Objekte absichtlich undurchsichtig sind: Sie geben keine Informationen über das Bild preis, das sie repräsentieren.

Beispiele

Grundlegende Verwendung

In diesem Beispiel wird das background-image eines <button> mit url() gesetzt und eine relative URL für die Datei angegeben. Wir zeigen dann, wie man den stringifizierten berechneten und spezifizierten Wert erhält.

Beachten Sie, dass es versteckten Code für Protokollierung gibt, der nicht angezeigt wird, da er für das Beispiel nicht relevant ist.

HTML

Zuerst definieren wir das Button-Element:

<button>Magic Wand</button>

<pre id="log"></pre>

CSS

Wir fügen etwas CSS hinzu, einschließlich eines Hintergrundbilds, das eine Binärdatei anfordert:

button {
  display: inline-block;
  min-height: 100px;
  min-width: 100px;
  background: no-repeat 5% center url("magic-wand.png") aqua;
}

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

Als nächstes holen wir das <button>-Element, damit wir seine spezifizierten und berechneten Stile abfragen können.

// get the element
const button = document.querySelector("button");

Um den berechneten Wert des background-image zu bekommen, holen wir zuerst die Style-Map des Elements. Dann get() wir das background-image aus der Style-Map und stringifizieren es. Wir geben auch den Namen des Konstruktors aus, um zu demonstrieren, dass das zurückgegebene Objekt ein CSSImageValue ist.

// Get all computed styles with computedStyleMap()
const allComputedStyles = button.computedStyleMap();
const computedImageCSS = allComputedStyles.get("background-image");
log(computedImageCSS.toString());
log(computedImageCSS.constructor.name); // CSSImageValue

Als nächstes holen wir den spezifizierten Wert des background-image. Dazu holen wir zuerst die Menge der CSS-Regeln, die mit dem css-output Element assoziiert sind – hier schreibt MDN CSS für den Playground. Wir filtern dann die Regel, um die CSS-Regel rein nach ihrem Namen "button" zu finden (beachten Sie, dass dies in einer realen Anwendung fragiler Code ist). Sobald wir die assoziierte Regel haben, können wir das Bild aus seiner Style-Map bekommen und den Wert protokollieren.

// Get the specified value
const sheet = document.getElementById("css-output").sheet;
const rule = [...sheet.cssRules].find((r) => r.selectorText === "button");
const specifiedImageCSS = rule.styleMap.get("background-image");
log(specifiedImageCSS.toString());
log(specifiedImageCSS.constructor.name); // CSSImageValue

Ergebnis

Die Ergebnisse werden unten gezeigt. Beachten Sie, dass der zuerst angezeigte berechnete Wert eine vollständig aufgelöste URL hat, während der spezifizierte Wert eine relative URL ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSSKeywordValue
• CSSNumericValue
• CSSPositionValue
• CSSTransformValue
• CSSUnparsedValue