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>.

html
<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.

js
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

js
// 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
sheet

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

Siehe auch