实例属性
此接口还继承了其父接口 SVGElement 的属性。
SVGStyleElement.type已弃用-
一个字符串，对应于给定元素的
type属性。 SVGStyleElement.media-
一个字符串，对应于给定元素的
media属性。 SVGStyleElement.title-
一个字符串，对应于给定元素的
title属性。 SVGStyleElement.sheet只读-
返回与给定元素关联的
CSSStyleSheet对象，如果不存在则返回null。 SVGStyleElement.disabled-
一个布尔值，指示关联的样式表是否已禁用。
实例方法
此接口不实现任何特定方法，但继承了其父接口 SVGElement 的方法。
示例
动态添加 SVG 样式元素
要动态创建 SVG 样式元素 (SVGStyleElement)，你需要使用 Document.createElementNS()，并指定 SVG 命名空间中的 style 元素。
注意： Document.createElement() 不能用于创建 SVG 样式元素（它会返回一个 HTMLStyleElement）。
给定以下 SVG 元素
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="25" />
</svg>
你可以按如下方式创建 SVG 样式元素
// Get the SVG element object by tag name
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; }");
style.appendChild(node);
// Append the style element to the SVG element
svg.appendChild(style);
访问现有的 SVG 样式
你可以使用常规的 HTML 方法（如获取标签、ID 等）来访问在 HTML（或 SVG 文件）中定义的 SVG 样式元素。这些方法包括：Document.getElementsByTagName()、Document.getElementById()、Document.querySelector()、Document.querySelectorAll() 等。
例如，考虑以下定义了带有样式元素的 SVG 文件的 HTML：
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style id="circle_style_id">
circle {
fill: gold;
stroke: green;
stroke-width: 3px;
}
</style>
<circle cx="50" cy="50" r="25" />
</svg>
你可以像下面这样使用 Document.querySelector() 来获取第一个 svg 元素中的第一个 style 元素。
const svg = document.querySelector("svg");
const style = svg.querySelector("style");
或者，你可以使用 Document.getElementById()，指定标签 ID
const svg = document.querySelector("svg");
const style = svg.getElementById("circle_style_id");
或者直接通过 ID 从文档中获取元素（在本例中使用了 document.querySelector()）
const style = document.querySelector("#circle_style_id");
获取和设置属性
此示例演示了如何获取和设置样式元素的属性，在本例中该样式元素是在 SVG 定义中指定的。
HTML
HTML 包含一个 <circle> 的 SVG 定义，以及一个 <style> 元素，还有一个 HTML <button> 元素用于启用和禁用样式，以及一个 HTML <button> 元素用于记录属性值。
<button>Disable</button>
<textarea id="log" rows="6" cols="90"></textarea>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style id="circle_style_id" media="(width >= 600px)">
circle {
fill: gold;
stroke: green;
stroke-width: 3px;
}
</style>
<circle cx="60" cy="60" r="50" />
</svg>
请注意，我们在上面为 style 标签设置了 media 属性。我们没有设置 type，因为它已弃用，也没有设置 disabled，因为没有这样的属性（只有元素上的属性）。
JavaScript
下面的代码使用 ID 获取 style 元素（一个 SVGStyleElement）。
const svg = document.querySelector("svg");
const style = svg.getElementById("circle_style_id");
然后，我们添加一个函数来记录样式属性。该函数在初始化后、每次窗口大小调整时以及按钮被按下时调用。
// Get logging text area
const log = document.getElementById("log");
function setLogText() {
// Log current values of properties
log.value = `style.media: ${style.media} (frame width: ${window.innerWidth})\n`; // 'all' by default
log.value += `style.title: ${style.title}\n`; // no default value
log.value += `style.disabled: ${style.disabled}\n`; // 'false' by default
log.value += `style.type: ${style.type}\n`; // deprecated (do not use)
log.value += `style.sheet.rules[0].cssText: ${style.sheet.rules[0].cssText}\n`;
}
// Log initial property values
setLogText();
// Log when the frame resizes
addEventListener("resize", () => {
setLogText();
});
最后，我们为按钮设置一个事件处理器。当按钮被点击时，disabled 属性会在启用和禁用之间切换。这也会更新日志和按钮文本。
const button = document.querySelector("button");
button.addEventListener("click", () => {
style.disabled = !style.disabled;
button.textContent = style.disabled ? "Enable" : "Disable";
// Log after button presses
setLogText();
});
结果
结果如下图所示。切换按钮以启用和禁用 SVG 样式元素。如果 SVG 样式未禁用，你还可以调整窗口宽度，以查看 media 属性对样式的影响（当包含实时示例的框架宽度为 600px 时）。
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # 接口 SVGStyleElement |
浏览器兼容性
加载中…