HTMLStyleElement: disabled 属性
HTMLStyleElement.disabled 属性可用于获取和设置样式表是否被禁用（true）或未被禁用（false）。
请注意，HTML <style> 元素没有相应的 disabled 属性。
值
如果样式表被禁用，或者没有关联的样式表，则返回 true；否则返回 false。默认值为 false（如果有关联的样式表）。
该属性可用于启用或禁用关联的样式表。当没有关联的样式表时，将该属性设置为 true 无效。
示例
禁用内联样式
本示例演示了如何以编程方式设置在 HTML 中使用 HTML <style> 元素定义的样式的 disabled 属性。请注意，您还可以使用 Document.styleSheets 访问文档中的任何/所有样式表。
HTML
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
下面的代码通过 id 获取 style 元素，然后将其设置为禁用。由于样式已存在（因为它定义在 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 上创建新的 style 元素。这通过首先使用 Document.createElement() 创建一个 style 元素，创建并附加一个带有样式定义的文本节点，然后将 style 元素附加到文档主体来完成。
// 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;
最后，我们为按钮添加一个事件处理程序，用于切换禁用状态和按钮文本（这与前一个示例相同）。
const button = document.querySelector("button");
button.addEventListener("click", () => {
style.disabled = !style.disabled;
const buttonText = style.disabled ? "Enable" : "Disable";
button.innerText = buttonText;
});
结果
结果如下所示。按下按钮可切换用于文本的样式的 disabled 状态。
规范
| 规范 |
|---|
| HTML # dom-style-disabled |
浏览器兼容性
加载中…