/
index.md
139 lines (96 loc) · 4.17 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
---
title: "HTMLStyleElement: disabled property"
short-title: disabled
slug: Web/API/HTMLStyleElement/disabled
page-type: web-api-instance-property
browser-compat: api.HTMLStyleElement.disabled
---
{{APIRef("HTML DOM")}}
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](/en-US/docs/Web/HTML/Element/style).
## 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](/en-US/docs/Web/HTML/Element/style).
Note that you can also access any/all stylesheets in the document using [`Document.styleSheets`](/en-US/docs/Web/API/Document/styleSheets).
#### HTML
The HTML contains an HTML [`<style>`](/en-US/docs/Web/HTML/Element/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.
{{EmbedLiveSample("Disabling a style defined in the SVG")}}
### 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()`](/en-US/docs/Web/API/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.
{{EmbedLiveSample("Disabling a programmatically defined style")}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{domxref("SVGStyleElement.disabled")}}