SVGStyleElement: sheet-Eigenschaft
Die SVGStyleElement.sheet schreibgeschützte Eigenschaft gibt das CSSStyleSheet zurück, das dem angegebenen SVG-Stilelement entspricht, oder null, wenn keines vorhanden ist.
Wert
Ein CSSStyleSheet oder null, wenn dem Element kein Stylesheet zugeordnet ist.
Beispiele
Dieses Beispiel zeigt, wie das mit einem Element verknüpfte CSS-Stylesheet abgerufen wird.
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 folgende 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 protokolliert dann das Stylesheet und die damit verbundene CSS-Regel dieses neuen Elements, indem style.sheet verwendet wird.
Um die
// 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 an, das auf den SVG-Kreis angewendet wurde.
Spezifikationen
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-linkstyle-sheet |
Browser-Kompatibilität
BCD tables only load in the browser