SVGStyleElement: свойство media

Свойство SVGStyleElement.media — это строка запроса к медиа, соответствующая атрибуту media данного элемента SVG-стиля.

Запрос должен быть выполнен для применения стиля.

Строка, определяющая список допустимых запросов к медиа с одним или несколькими значениями, разделёнными запятыми. Например "screen, print", или "all" (значение по умолчанию).

Значение инициализируется строкой, указанной в соответствующем атрибуте стиля media.

В этом примере показано, как программно получить и установить свойство media для стиля, определённого в определении SVG.

HTML содержит определение SVG для <circle> с элементом <style>, который условлен запросом к медиа "all and (min-width: 600px)". Мы также определяем button, который будет использоваться для отображения текущего стиля и изменения стиля.

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

Нижеприведённый код получает элемент 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();
});

Результат показан ниже. Текст кнопки показывает значение атрибута media, первоначально применённого к SVG-стилю, а также ширину текущей области (поскольку код выполняется в области). Уменьшите ширину области до ширины, указанной в запросе к медиа на кнопке, чтобы наблюдать за применением стиля. Нажмите на кнопку, чтобы переключить значение свойства media стиля (что будет отражено на кнопке).

• HTMLStyleElement.media