SVGStyleElement：sheet 属性

SVGStyleElement.sheet 只读属性返回与给定 SVG 样式元素对应的 CSSStyleSheet，如果不存在则返回 null。

值

一个 CSSStyleSheet，如果元素没有关联的样式表则为 null。

示例

此示例演示如何获取与元素关联的 CSS 样式表。

HTML

HTML 包含 <circle> 的 SVG 定义。

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

以下代码创建了一个 style 元素（一个 SVGStyleElement）并将其添加到 SVG 中。

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);

以下代码使用 style.sheet 记录与这个新元素关联的样式表和 CSS 规则。为了使

// 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}`;

结果

结果如下所示。成功时，日志将显示应用于 SVG 圆形的 CSSStyleSheet 对象。

规范

规范
CSS 对象模型 (CSSOM) # dom-linkstyle-sheet

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

HTMLStyleElement.sheet