SVGStyleElement: свойство sheet
Свойство SVGStyleElement.sheet чтения, только для чтения возвращает CSSStyleSheet, соответствующий данному элементу стиля SVG, или null в случае его отсутствия.
Значение
A CSSStyleSheet, или null если у элемента нет связанного таблицы стилей.
Примеры
Этот пример демонстрирует, как получить таблицу стилей CSS, связанную с элементом.
HTML
HTML содержит определение SVG для <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
Код ниже создает элемент 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);
Нижеприведенный код затем выводит в консоль таблицу стилей и правило CSS, связанное с этим новым элементом, используя style.sheet. Чтобы
// 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}`;
Результат
Результат показан ниже. При успехе журнал отображает объект CSSStyleSheet, примененный к кругу SVG.
Спецификации
| Спецификация |
|---|
| CSS Object Model (CSSOM) # dom-linkstyle-sheet |
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
sheet |
38 | 12 | 1.5 | 25≤12.1–15 | 16.4 | 38 | 4 | 25≤12.1–14 | 16.4 | 3.0 | 38 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGStyleElement/sheet
