Why doesn't the disabled property work when applied in HTML to a <style> section but it does work when applied via JS. In other words, if I have:
<html>
<style id="myStyle" disabled>
body {
background-color: black;
color: white;
}
</style>
<script>
// document.getElementById("myStyle").disabled = true;
</script>
<body>
Hello world!
</body>
</html>
Then it will be white text on black background even though the <style> section has the disabled attribute. But if I uncomment the JS line, the style will be properly disabled and it will be black text on white background. I also tried disabled="true" and some other variants with no effect.
Thank you!
The style tag does not actually have a disabled property per the HTML spec https://www.w3.org/TR/html401/present/styles.html#h-14.2.3
<!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 dom spec does have a disabled property (https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-16428977):
interface HTMLStyleElement : HTMLElement {
attribute boolean disabled;
attribute DOMString media;
attribute DOMString type;
};
Thus your JS can change the DOM and disable the style tag, however, there is no way to disable the style tag directly from HTML.
Style has no disabled attribute as per the spec.
https://www.w3.org/TR/html401/present/styles.html#h-14.2.3
%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 --
Also style is a Head Tag:
The STYLE element allows authors to put style sheet rules in the head of the document. HTML permits any number of STYLE elements in the HEAD section of a document.