HTML "link" (stylesheet) disabled attribute

S

5

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.

Supercolumnar answered 12/5, 2012 at 14:58 Comment(0)

P

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>

Polynices answered 12/5, 2012 at 15:12 Comment(3)

Thanks- this is perfect. Don't know why I never thought of this- can use removeAttribute to disable and addAttribute to enable. – Supercolumnar 12/5, 2012 at 15:18

Quite welcome, sir. Glad to be of service and.... wait... VettelS, you a racing fan? – Polynices 12/5, 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. :) – Polynices 14/5, 2012 at 0:16

C

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)

Crepuscular answered 12/5, 2012 at 15:9 Comment(2)

If I were to use this, would JavaScript still allow me to enable/disable it once the stylesheet is loaded? – Supercolumnar 12/5, 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. – Crepuscular 12/5, 2012 at 15:19

W

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.

Wench answered 12/5, 2012 at 15:8 Comment(0)

S

1

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.

So answered 11/10, 2023 at 1:13 Comment(0)

C

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.

Condon answered 12/5, 2012 at 14:59 Comment(0)

Recommended topics

Hot tags