SVGStyleElement: свойство disabled

Свойство SVGStyleElement.disabled можно использовать для получения и установки значения, указывающего, отключён ли стилевой лист (true) или нет (false).

Обратите внимание, что соответствующего атрибута disabled у элемента SVG <style> нет.

Возвращает true , если стилевой лист отключён или связанного стилевого листа нет; в противном случае false. Значение по умолчанию false (если связан стилевой лист).

Свойство можно использовать для включения или отключения связанного стилевого листа. Установка свойства в значение true, когда нет связанного стилевого листа, не имеет эффекта.

Этот пример демонстрирует программное задание свойства disabled для стиля, определённого в HTML определении SVG.

HTML

HTML содержит определение SVG для элемента <circle> с элементом <style>, а также кнопку, которая будет использоваться для отключения стиля.

<button>Enable</button>
<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>

JavaScript

Код ниже получает элемент style (элемент SVGStyleElement) по его id и затем устанавливает его как отключённый. Стиль уже существует, так как он определён в SVG, поэтому это должно сработать.

const svg = document.querySelector("svg");
const style = svg.getElementById("circle_style_id");
style.disabled = true;

Затем мы добавляем обработчик событий для кнопки, который переключает состояние disabled и текст кнопки.

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

button.addEventListener("click", () => {
  style.disabled = !style.disabled;
  button.textContent = style.disabled ? "Enable" : "Disable";
});

Результат

Результат показан ниже. Нажмите кнопку, чтобы переключить свойство disabled для стиля, используемого для круга.

Этот пример очень похож на предыдущий, за исключением того, что стиль определён программно.

Обратите внимание, что вы можете применять несколько стилей как в исходном коде SVG, так и программно. Этот пример в основном предназначен для демонстрации того, как создать стиль внешним образом и показать, в какой момент этот стиль можно отключить.

HTML

HTML похож на предыдущий случай, но определение SVG не включает никаких стилей по умолчанию.

<button>Enable</button>
<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

Сначала мы создаём новый узел стиля SVG. Это делается путём создания элемента стиля в пространстве имён SVG с помощью Document.createElementNS(), создания и добавления текстового узла со значением стиля, а затем добавления узла в 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);

Затем мы отключаем стиль. Обратите внимание, что это самая ранняя точка, в которой установка свойства в true будет успешной. До этого момента SVG не имело связанного стиля, поэтому значение по умолчанию false.

//Disable the style
style.disabled = true;

Наконец, мы добавляем обработчик событий для кнопки, который переключает состояние disabled и текст кнопки (это тот же обработчик, что и в предыдущем примере).

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

button.addEventListener("click", () => {
  style.disabled = !style.disabled;
  button.textContent = style.disabled ? "Enable" : "Disable";
});

Результат

Результат показан ниже. Нажмите кнопку, чтобы переключить состояние disabled для стиля, используемого для круга.

• HTMLStyleElement.disabled