16

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.

5 Answers 5

20

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>
3
  • Thanks- this is perfect. Don't know why I never thought of this- can use removeAttribute to disable and addAttribute to enable.
    – VettelS
    May 12, 2012 at 15:18
  • Quite welcome, sir. Glad to be of service and.... wait... VettelS, you a racing fan?
    – Scotty C.
    May 12, 2012 at 15:25
  • Dang right! I don't wanna get in trouble for spamming, but it's nice to find another racing fan on here. :)
    – Scotty C.
    May 14, 2012 at 0:16
5

Why not turning the problem around : only load the CSS if JavaScript is enabled?

Taken from this example, you could use something like:

var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
2
  • If I were to use this, would JavaScript still allow me to enable/disable it once the stylesheet is loaded?
    – VettelS
    May 12, 2012 at 15:13
  • If you have a look at the link provided, you'll see that it's also explained how to remove a CSS file via JavaScript. May 12, 2012 at 15:19
1

I think in this case you may have to rely on JavaScript.

If you think more down the lines of serving up the style-sheet if needed rather than disabling by default you should nail it.

0

Another way to disable it is by adding a media attribute and I found it more performant.

<link rel="stylesheet" href="style.css" media="max-width: 1px" />
link.setAttribute('media', 'max-width: 1px')

This is also applicable to <style> elements.

0

The .disabled property should work just as is:

const link = document.body.querySelector("link");
onclick = () => link.disabled = !link.disabled;
body { color: var(--blue) !important }
<link rel="stylesheet" disabled href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" >
Click to toggle the stylesheet.

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.