16

To disable <style> blocks, all browsers allow setting document.styleSheets[x].disabled = true. However, only IE allows this property to be set on the tag itself, <style disabled="true">. Is there a workaround for this in other browsers? It seems odd that something done dynamically can't also be done statically.

2
  • 5
    It think true might be an invalid value of the disabled attribute. Try disabled="disabled" Apr 22, 2011 at 15:55
  • 1
    Add an onload event on the style tag: onload="this.disabled=true" Mar 4, 2017 at 11:17

5 Answers 5

8

The style element has no valid attribute named disabled. From 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 --
  >

However, the HTMLStyleElement DOM interface does have such a property. From the DOM spec:

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

Don't confuse an HTML element with its counterpart in the DOM. It is not "odd that something done dynamically can't also be done statically." The HTML and DOM specs were created to solve different problems. HTML is a markup language. The DOM is a convention for representing and interacting with the objects in a document.

4
  • So no workaround? IE does what's reasonable while everyone else blindly follows the standard.
    – Lucent
    Apr 22, 2011 at 16:28
  • @Lucent - I disagree with your characterization. IE unnecessarily diverts from the standard, while everyone else does what's reasonable (i.e. follows the standard where there's not an obvious and compelling reason not to). The DOM and HTML are separate things. You should not conflate their respective standards. It is not "odd that something done dynamically can't also be done statically", because these are different standards with different purposes.
    – Wayne
    Apr 22, 2011 at 16:45
  • @Lucent - not really. It mostly works the other way round, in that the standard records either what browsers already do, or what they have indicated a willingness to do. What they are willing to do is what they think there is a demand for from users - it's the users that provide their revenue stream. That, in turn, depends on users being able to use the web pages created by web authors, and in this case, there simply isn't sufficient demand from users or authors to have this feature, ahead of other things they could be implementing.
    – Alohci
    Apr 22, 2011 at 16:50
  • I think a structure's model should reflect what it's modelling. Not everything is logical for everyone in the same way I guess.
    – Lodewijk
    Mar 4, 2014 at 3:03
8

Extending on the media answer by @lampyridae, you can negate a media selector using not. To disable a style tag statically, I use media="not all", which works for me in Chrome 79.

1
  • 1
    Very elegant solution. Mar 11, 2020 at 0:13
3

The media attribute can be set both in the HTML and by Javascript. The idea is to set the media attribute so that the style tag does not apply to any device in order to disable it.

I think setting it to something invalid like media="bogus" or media="none" is risky since the browser may decide to simply ignore the predicate and apply the style to all media types. Fortunately, setting a max screen width of one pixel is quite valid and in my book that's pretty much the same as disabling the style tag.

 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>

4
  • Thanks! Brilliant! I'll take this hack. I'm building a tool that applies <link> and <style> tags to a page with a toggle and this method works fast in updating the UI faster than my first approach.
    – Lounge9
    Jul 17, 2018 at 23:49
  • this work around is correct. actually setting the type attribute to whatever random string will also disable the style block without remove it entirely
    – YugoAmaryl
    Oct 31, 2018 at 9:54
  • Any reason not to use max-width: 0px ?
    – Victoria
    Dec 14, 2018 at 8:34
  • max-width < 0px works in firefox, at least, which returns it as "not all", which would be an even more obvious alternative syntax.
    – Victoria
    Dec 28, 2018 at 9:10
2

To do it statically, just remove the style tag.

As an alternative, you could remove the style node from the DOM, and re-insert it to re-enable it.

3
  • 2
    And what if you want to dynamically add it later? Apr 22, 2011 at 15:56
  • @Peter of the Corn, but then it's not static anymore is it?
    – cdeszaq
    Apr 22, 2011 at 15:57
  • 3
    I'm sure the use case here is to start off with the styles statically disabled, but have them available to be dynamically enabled later.
    – Wayne
    Apr 22, 2011 at 16:46
2

One simple option is to make it an alternate stylesheet with a different title than the main stylesheet set. That will make browsers default it to disabled.

1
  • 1
    It would be good if the examples in CSSOM section 5.2.5 included a use of the style element
    – Alohci
    Apr 22, 2011 at 19:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.