HTMLStyleElement: disabled property
===================================

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 `<style>` element.

Value
-----

 Returns `true` if the stylesheet is disabled, or there is no associated stylesheet; otherwise `false`.
 The value is `false` by default (if there is an associated stylesheet).

 The property can be used to enable or disable an associated stylesheet.
 Setting the property to `true` when there is no associated stylesheet has no effect.

Examples
--------

### Disabling an inline style

 This example demonstrates programmatically setting the disabled property on a style that was defined in the HTML using the HTML `<style>` element.
 Note that you can also access any/all stylesheets in the document using `Document.styleSheets`.

#### HTML

The HTML contains an HTML `<style>` element that makes paragraph elements blue, a paragraph element, and a button that will be used to enabled and disable the style.


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

 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.

### Disabling a programmatically defined style

This example is very similar to the one above, except that the style is defined programmatically.

#### HTML

The HTML is similar to the previous case, but the definition does not include any default styling.


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


#### JavaScript

 First we create the new style element on the HTML.
 This is done by first creating a style element using `Document.createElement()`, creating and appending a text node with the style definition, and then appending the style element to the document body.


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


 We can then disable the style as shown below.
 Note that this is the earliest point at which setting the property to `true` will succeed.
 Before this point the document did not have an associated style, and so the value defaults to `false`.


```js
//Disable the style
style.disabled = true;
```


Last of all we add an event handler for the button that toggles the disabled state and button text (this is the same as in the previous example).


```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` state on the style used for the text.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-style-disabled |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `SVGStyleElement.disabled`