disabled = true 可以在 <style> 上动态设置。为什么不是静态的？

Question

要禁用<style> 块，所有浏览器都允许设置document.styleSheets[x].disabled = true。但是，只有 IE 允许在标签本身上设置此属性，<style disabled="true">。在其他浏览器中是否有解决方法？动态完成的事情也不能静态完成，这似乎很奇怪。

Answer 1

style 元素没有名为disabled 的有效属性。来自the HTML spec：

<!ELEMENT STYLE - - %StyleSheet        -- style info -->
<!ATTLIST STYLE
  %i18n;                               -- lang, dir, for use with title --
  type        %ContentType;  #REQUIRED -- content type of style language --
  media       %MediaDesc;    #IMPLIED  -- designed for use with these media --
  title       %Text;         #IMPLIED  -- advisory title --
  >

但是，HTMLStyleElement DOM 接口确实有这样的属性。来自the DOM spec：

interface HTMLStyleElement : HTMLElement {
           attribute boolean         disabled;
           attribute DOMString       media;
           attribute DOMString       type;
};

不要将 HTML 元素与 DOM 中的对应元素混淆。 “动态完成的事情不能静态完成并不奇怪。” HTML 和 DOM 规范的创建是为了解决不同的问题。 HTML 是一种标记语言。 DOM 是用于表示文档中的对象并与之交互的约定。

Answer 2

扩展@lampyridae 的media 答案，您可以使用not 否定媒体选择器。要静态禁用样式标记，我使用 media="not all"，它适用于 Chrome 79。

Answer 3

media 属性既可以在 HTML 中设置，也可以通过 Javascript 设置。想法是设置media 属性，以便样式标签不适用于任何设备以禁用它。

我认为将其设置为像media="bogus" 或media="none" 这样的无效值是有风险的，因为浏览器可能会决定简单地忽略谓词并将样式应用于所有媒体类型。幸运的是，设置一个像素的最大屏幕宽度是非常有效的，在我的书中这与禁用样式标签几乎相同。

 var style = document.querySelector("#my-style");

 document.querySelector("#btn-style").addEventListener("click",function() {
    style.removeAttribute("media");
 });

 document.querySelector("#btn-unstyle").addEventListener("click",function() {
    style.setAttribute("media", "max-width: 1px");
 });

<style id="my-style" media="max-width: 1px">
   p { color: red }
</style>

<p>Styled if you click below.</p>

<button id="btn-style">Style that p</button>

<button id="btn-unstyle">Unstyle that p</button>

Answer 4

要静态完成，只需删除样式标签。

作为替代方案，您可以从 DOM 中删除样式节点，然后重新插入以重新启用它。

Answer 5

一个简单的选择是使它成为一个备用样式表，其标题与主样式表集不同。这将使浏览器默认禁用它。