SVGStyleElement: sheet-Eigenschaft
Baseline 2023Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die schreibgeschützte Eigenschaft SVGStyleElement.sheet gibt das CSSStyleSheet zurück, das dem angegebenen SVG-Style-Element entspricht, oder null, wenn keines vorhanden ist.
Wert
Ein CSSStyleSheet, oder null, wenn das Element kein zugeordnetes Stylesheet hat.
Beispiele
Dieses Beispiel zeigt, wie man das mit einem Element verknüpfte CSS-Stylesheet erhält.
HTML
Das HTML enthält eine SVG-Definition für einen <circle>.
<textarea id="log" rows="3" cols="50"></textarea>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="25" />
</svg>
JavaScript
Der unten stehende Code erstellt ein style-Element (ein SVGStyleElement) und fügt es dem SVG hinzu.
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);
Der Code unten protokolliert dann das Stylesheet und die mit diesem neuen Element verknüpfte CSS-Regel, indem er style.sheet verwendet.
// Log the sheet associated with this new element.
const log = document.getElementById("log");
log.value = `${style.sheet} with rules[0].cssText:\n ${style.sheet.rules[0].cssText}`;
Ergebnis
Das Ergebnis wird unten angezeigt.
Bei Erfolg zeigt das Protokoll das CSSStyleSheet-Objekt, das auf den SVG-Kreis angewendet wird.
Spezifikationen
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-linkstyle-sheet |