HTMLStyleElement: disabled 属性

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本上运行。它自 2015 年 7 月.

报告反馈

HTMLStyleElement.disabled 属性可用于获取和设置样式表是否禁用 (true) 或未禁用 (false)。

值

请注意，HTML <style> 元素 上没有相应的 disabled 属性。

如果样式表被禁用，或者没有关联的样式表，则返回 true；否则返回 false。默认情况下，该值为 false（如果有关联的样式表）。

示例

该属性可用于启用或禁用关联的样式表。在没有关联的样式表的情况下将该属性设置为 true 不会产生任何效果。

禁用内联样式

HTML

此示例演示了对使用 HTML <style> 元素 在 HTML 中定义的样式以编程方式设置 disabled 属性。请注意，您还可以使用 Document.styleSheets 访问文档中的任何/所有样式表。

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

以下代码使用其 id 获取 style 元素，然后将其设置为禁用。由于样式已存在（因为它是在 SVG 中定义的），因此这应该会成功。

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

然后，我们为按钮添加事件处理程序，该处理程序切换 disabled 值和按钮文本。

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

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

结果

结果显示在下方。按按钮可切换段落文本使用的样式的 disabled 属性值。

禁用以编程方式定义的样式

此示例与上面的示例非常相似，只是样式是通过编程方式定义的。

HTML

HTML 与之前的案例类似，但定义不包含任何默认样式。

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

JavaScript

首先，我们在 HTML 上创建新的样式元素。这是通过首先使用 Document.createElement() 创建一个样式元素，创建并附加具有样式定义的文本节点，然后将样式元素附加到文档主体来完成的。

js
// 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。

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

最后，我们为按钮添加一个事件处理程序，该处理程序切换禁用状态和按钮文本（这与前面的示例相同）。

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

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

结果

结果显示在下方。按按钮可切换用于文本的样式的禁用状态。

规范

规范
HTML 标准
# dom-style-disabled

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅