SVGStyleElement：disabled 属性

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

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

值

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

该属性可用于启用或禁用关联的样式表。当没有关联的样式表时，将该属性设置为 true 不会产生任何影响。

示例

禁用在 SVG 中定义的样式

此示例演示了如何在程序中设置在 HTML SVG 定义中定义的样式的 disabled 属性。

HTML

HTML 包含 <circle> 的 SVG 定义，其中包含 <style> 元素，以及一个将用于禁用样式的按钮。

html

<button>Enable</button>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <style id="circle_style_id">
    circle {
      fill: gold;
      stroke: green;
      stroke-width: 3px;
    }
  </style>
  <circle cx="50" cy="50" r="25" />
</svg>

JavaScript

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

const svg = document.querySelector("svg");
const style = svg.getElementById("circle_style_id");
style.disabled = true;

然后，我们为按钮添加一个事件处理程序，该处理程序切换禁用状态和按钮文本。

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

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

结果

结果如下所示。按按钮可切换圆形使用的样式上的 disabled 属性。

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

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

请注意，您可以在 SVG 源代码和以编程方式中应用多个样式。此示例主要用于演示如何从外部创建样式，以及在什么时间点可以禁用样式。

HTML

HTML 与上一个案例类似，但 SVG 定义不包含任何默认样式。

html

<button>Enable</button>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="25" />
</svg>

JavaScript

首先，我们创建新的 SVG 样式节点。这是通过首先使用 Document.createElementNS() 在 SVG 命名空间中创建一个样式元素，创建和附加一个包含样式定义的文本节点，然后将节点附加到上面定义的 SVG 来完成的。

注意：必须使用 Document.createElementNS() 而不能使用 Document.createElement() 来创建样式，否则默认情况下会创建等效的 HTML 样式元素。

const svg = document.querySelector("svg");

// Create the `style` element in the SVG namespace
const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
const node = document.createTextNode("circle { fill: red; }");
svg.appendChild(style);
style.appendChild(node);

然后，我们禁用样式。请注意，这是将属性设置为 true 会成功的最早时间点。在此之前，SVG 没有关联的样式，因此该值默认为 false。

//Disable the style
style.disabled = true;

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

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

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

结果

结果如下所示。按按钮可切换圆形使用的样式上的 disabled 状态。

规范

规范
可缩放矢量图形 (SVG) 2 # __svg__SVGStyleElement__disabled

浏览器兼容性

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

另请参阅

HTMLStyleElement.disabled