SVGStyleElement：media 属性

SVGStyleElement.media 属性是一个媒体查询字符串，对应于给定 SVG 样式元素的 media 属性。

必须匹配查询才能应用样式。

值

一个字符串，定义一个有效的媒体查询列表，包含一个或多个以逗号分隔的值。例如 "screen, print" 或 "all"（默认值）。

该值使用在对应样式的 media 属性中指定的字符串进行初始化。

示例

此示例演示了如何以编程方式获取和设置在 SVG 定义中定义的样式的 media 属性。

HTML

HTML 包含一个 <circle> 的 SVG 定义，其中包含一个 <style> 元素，该元素以 media 查询 "all and (min-width: 600px)" 为条件。我们还定义了一个 button，它将用于显示当前样式和更改样式。

html

<button></button>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="60" cy="60" r="50" />
</svg>

JavaScript

以下代码使用其 id 获取 style 元素 (SVGStyleElement)。

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

然后，我们添加一个函数来设置按钮文本，以显示样式 media 属性的当前值以及当前窗口宽度。此函数用于设置初始按钮文本，以及在窗口调整大小或按下按钮时调用。按钮事件处理程序还会设置样式 media 属性的值。

const button = document.querySelector("button");

function setButtonText() {
  button.textContent = `Media: ${style.media} (Width: ${window.innerWidth})`;
}
setButtonText();

addEventListener("resize", () => {
  setButtonText();
});

button.addEventListener("click", () => {
  style.media = "all and (min-width: 700px)";
  setButtonText();
});

结果

结果如下所示。按钮文本显示最初应用于 SVG 样式的 media 属性的值以及当前帧的宽度（因为代码在帧中运行）。将帧的宽度缩小到按钮中显示的媒体查询宽度，以观察样式的应用情况。按下按钮以切换样式的 media 属性的值（这将在按钮上反映出来）。

注意：media 属性可以设置为任何字符串，但如果字符串不是有效的媒体查询，则会忽略该字符串。

规范

规范
可缩放矢量图形 (SVG) 2 # __svg__SVGStyleElement__media

浏览器兼容性

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

另请参阅

HTMLStyleElement.media