HTMLStyleElement: свойство disabled

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

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

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

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

Этот пример демонстрирует программное задание свойства disabled для стиля, определённого в HTML с помощью элемента HTML <style>. Обратите внимание, что вы также можете получить доступ к любому/всем стиловым листам в документе, используя Document.styleSheets.

HTML

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

<button>Enable</button>
<style id="InlineStyle">
  p {
    color: blue;
  }
</style>
<p>Text is black when style is disabled; blue when enabled.</p>
<p></p>

JavaScript

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

const style = document.getElementById("InlineStyle");
style.disabled = true;

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

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

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

Результат

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

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

HTML

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

<button>Enable</button>
<p>Text is black when style is disabled; blue when enabled.</p>
<p></p>

JavaScript

Сначала мы создаём новый элемент стиля в HTML. Это делается путём создания элемента стиля с помощью Document.createElement(), создания и добавления текстового узла с определением стиля, а затем добавления элемента стиля в тело документа.

// Create the `style` element
const style = document.createElement("style");
const node = document.createTextNode("p { color: blue; }");
style.appendChild(node);
document.body.appendChild(style);

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

//Disable the style
style.disabled = true;

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

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

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

Результат

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

• SVGStyleElement.disabled