例項屬性
此介面還繼承了其父介面 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 |
瀏覽器相容性
載入中…