[SOLVED] HTML "link" (stylesheet) disabled attribute

HTML "link" (stylesheet) disabled attribute

I'm using JavaScript to enable/disable stylesheets using the following:

document.styleSheets[0].disabled = true|false;

This JS works fine, however I would like the stylesheet to be DISabled by default. Whilst I could use the JS above to immediately disable the stylesheet when the page loads, this obviously won't work for users who have JavaScript turned off.

I've tried doing this:

<link rel="stylesheet" href="style.css" disabled />

Whilst this disables the stylesheet, JavaScript (or at least the method I'm using) can't ENable it again. I've also tried all of these variations on the "disabled" attribute: disabled="disabled", disabled="true" and disabled=true, but these produce the same problem- I can't enable them again with JavaScript.

In short, I need a way to enable/disable an external stylesheet using JavaScript, but have that stylesheet disabled by default but not relying on JavaScript.

Any help would be greatly appreciated. Thanks.

N.B. This effect can be achieved by using two stylesheets, the second overwriting the first, therefore having no need for the "disabled" attribute. However, it's obviously preferable to only use a single stylesheet if possible, hence my question above.

Solution

You can use JavaScript's removeAttribute method for that.

<html>
    <head>
        <link id="first_style" rel="stylesheet" href="#" disabled />

        <script type="text/javascript">
            window.onload = function()
            {
                document.getElementById('first_style').removeAttribute('disabled');
            }
        </script>
    </head>
    <body>
        <p>something</p>
    </body>
</html>