javascript - disabled = true can be set dynamically on <style>. Why not statically? - Stack Overflow

admin管理员组

文章数量:1180552

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.

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.

• javascript
• html
• css
• stylesheet

Share Improve this question Follow edited May 21, 2012 at 9:40 THelper 15.6k66 gold badges6767 silver badges105105 bronze badges asked Apr 22, 2011 at 15:52 LucentLucent 1,74711 gold badge1919 silver badges2222 bronze badges 2

• 5 It think true might be an invalid value of the disabled attribute. Try disabled="disabled" – Peter Olson Commented Apr 22, 2011 at 15:55
• 1 Add an onload event on the style tag: onload="this.disabled=true" – Danny '365CSI' Engelman Commented Mar 4, 2017 at 11:17

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 9

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.

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.

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>

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.

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.

本文标签： javascriptdisabledtrue can be set dynamically on ltstylegt Why not staticallyStack Overflow