SVGStyleElement: media-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die SVGStyleElement.media
-Eigenschaft ist eine Media-Query-Zeichenkette, die dem media
-Attribut des angegebenen SVG-Stilelements entspricht.
Die Query muss zutreffen, damit der Stil angewendet wird.
Wert
Ein String, der eine gültige Liste von Media-Queries mit einem oder mehreren durch Kommata getrennten Werten definiert.
Zum Beispiel "screen, print"
oder "all"
(der Standardwert).
Der Wert wird mit dem String initialisiert, der im entsprechenden media
-Attribut des Stils angegeben ist.
Beispiele
Dieses Beispiel zeigt, wie die media
-Eigenschaft eines Stils, der in einer SVG-Definition definiert wurde, programmgesteuert abgerufen und gesetzt werden kann.
HTML
Das HTML enthält eine SVG-Definition für einen <circle>
mit einem <style>
-Element, das von der Media-Query "all and (min-width: 600px)"
abhängig ist.
Wir definieren auch einen button
, der verwendet wird, um den aktuellen Stil anzuzeigen und den Stil zu ändern.
<button></button>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="60" cy="60" r="50" />
</svg>
JavaScript
Der untenstehende Code holt das style
-Element (ein SVGStyleElement
) mittels seiner ID.
const svg = document.querySelector("svg");
// Create the `style` element in the SVG namespace
const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
const node = document.createTextNode("circle { fill: red; }");
svg.appendChild(style);
style.appendChild(node);
Wir fügen dann eine Funktion hinzu, um den Text des Buttons so zu setzen, dass er den aktuellen Wert der media
-Eigenschaft des Stils zusammen mit der aktuellen Fensterbreite zeigt.
Diese Funktion wird aufgerufen, um den initialen Buttontext zu setzen und auch, wenn das Fenster neu dimensioniert wird oder der Button gedrückt wird.
Der Button-Event-Handler setzt ebenfalls den Wert der media
-Eigenschaft des Stils.
const button = document.querySelector("button");
function setButtonText() {
button.textContent = `Media: ${style.media} (Width: ${window.innerWidth})`;
}
setButtonText();
addEventListener("resize", () => {
setButtonText();
});
button.addEventListener("click", () => {
style.media = "all and (min-width: 700px)";
setButtonText();
});
Ergebnis
Das Ergebnis wird unten gezeigt.
Der Buttontext zeigt den ursprünglich auf den SVG-Stil angewendeten Wert des Media-Attributs zusammen mit der Breite des aktuellen Fensters (da der Code in einem Frame ausgeführt wird).
Verkleinern Sie die Breite des Frames auf die im Button angezeigte Media-Query-Breite, um zu beobachten, wie der Stil angewendet wird.
Drücken Sie den Button, um den Wert der media
-Eigenschaft des Stils zu ändern (was sich im Button widerspiegeln wird).
Hinweis: Die media
-Eigenschaft kann auf jeden String gesetzt werden, wird jedoch ignoriert, wenn der String keine gültige Media-Query ist.
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # __svg__SVGStyleElement__media |
Browser-Kompatibilität
BCD tables only load in the browser