HTMLStyleElement: disabled property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2015.

The HTMLStyleElement.disabled property can be used to get and set whether the stylesheet is disabled (true) or not (false).

Note that there is no corresponding disabled attribute on the HTML

Text is black when style is disabled; blue when enabled.

JavaScript

The code below gets the style element using its id, and then sets it as disabled. As the style already exists, as it is defined in the SVG, this should succeed.

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

We then add an event handler for the button that toggles the disabled value and button text.

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

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

Result

The result is shown below. Press the button to toggle the disabled property value on the style used for the paragraph text.