enable disable stylesheet using javascript in chrome

Question

Rephrase of question: What is the best way to provide alternate stylesheets for a document?

I have a list of stylesheets, all of which are referenced in the html file. I use javascript to disable all but one file.

example:

style1   disabled = false
style2   disabled = true

In practice, the last stylesheet to load (style2) is the active one, regardless of the disabled property.

How can I alternate between stylesheets on a document in chrome?

I tried to set the value of href attribute, but it seems to be read only.

example of code I have been using: (I am using an object called MenuStyles that is storing various css information)

function setActiveStyleSheet(name) {

    var selectedSheet;
    var currentSheet;
    for (var i = 0; i < MenuStyles.styleSheets.length; i++) {
        currentSheet = MenuStyles.styleSheets[i];
        if (currentSheet.name === name) {
            selectedSheet = currentSheet.sheetObj;
            currentSheet.disabled = false;
        } else {
            currentSheet.disabled = true;
        }
    }
    return selectedSheet;
}

EDIT: it turns out the problem was due entirely to bugs in the code. disabled property works fine. below is the fixed function:

function setActiveStyleSheet(name) {
    var selectedSheet;
    var currentSheet;
    for (var i = 0; i < MenuStyles.styleSheets.length; i++) {
        currentSheet = MenuStyles.styleSheets[i];
        if (currentSheet.name === name) {
            selectedSheet = currentSheet.sheetObj;
            currentSheet.sheetObj.disabled = false;
        } else {
            currentSheet.sheetObj.disabled = true;
        }
    }
    return selectedSheet;
}

Could you show us your actual code, please? I'd have expected the disabled property to work, too — Bergi
– Bergi, Commented Oct 10, 2012 at 17:52
A fail-safe way would be to remove the elements from the DOM, but I'm not sure whether that is what you want. — Bergi
– Bergi, Commented Oct 10, 2012 at 17:53

Diodeus - James MacFarlane · Accepted Answer · 2012-10-10 17:48:35Z

2

In general you'd subclass off the BODY tag and use a single stylesheet that uses these classes. Then just swap the BODY class, not the sylesheet. Otherwise, you should be doing this server-side.

<body class="sheet1">

then

sheet1.h1 {
 ...
}
sheet2.h1 {
 ...
}

answered Oct 10, 2012 at 17:48

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Prinzhorn Over a year ago

Not what he's asking for. Swapping is supported natively using rel="alternate stylesheet" w3.org/Style/Examples/007/alternatives.en.html and he wants to swap using JavaScript.

Diodeus - James MacFarlane Over a year ago

Then he should be removing/injecting the LINK to the stylesheet in the DOM.

CodeToad Over a year ago

thank you for the 3 options: body tag subclass, "alternate stylesheet" and replacing the link. I am currently looking into this article: alistapart.com/articles/alternate

kennebec · Accepted Answer · 2012-10-10 20:38:00Z

2

If you know the order of your stylesheets you can use-

document.styleSheets[i].disabled=true or
document.styleSheets[i].disabled=false;

If you have 2 stylesheets you can toggle between them with-

var S=document.styleSheets;
if(S[0].disabled){
  S[0].disabled=false;
  S[1].disabled=true;
}
else{
  S[1].disabled=false;
  S[0].disabled=true;
}

answered Oct 10, 2012 at 20:38

kennebec

105k32 gold badges109 silver badges127 bronze badges

1 Comment

CodeToad Over a year ago

thanks. I am able to set the disabled property. its just not affecting anything. the last stylehsset to load still takes effect, even though its disabled.

Bruce MacKenzie · Accepted Answer · 2013-06-13 18:35:18Z

2

Current browsers offer reasonable ability to dynamically enable/disable stylesheets through the use of either the 'disabled' DOM property (Gecko) or by adding/removing the disabled attribute (Webkit and IE). Unfortunately, these approaches only reliably work on 'link' tags that reference an external stylesheet (not 'style' tags), unless you are using IE10+. Yes - I said that - only IE does the right thing here.

For inline CSS using 'style' tags on non-IE browsers, you need to find a more crude way to enable/disable like those discussed above (remove the style element, etc).

answered Jun 13, 2013 at 18:35

Bruce MacKenzie

912 silver badges8 bronze badges

Comments

nick · Accepted Answer · 2019-02-21 22:24:16Z

1

For me if the link is disabled, document.styleSheets does not return the link in the collection ( in Chrome) . Only the enabled links are returned.

I use document.head.getElementsByTagName('LINK'), to get them all, out of HEAD.

Like:

 private changeStyle(styleName: string): void {
       const links = document.head.getElementsByTagName('LINK');
       for (let i = 0; i < links.length; i++) {
            const link = links[i] as any;

            if( !link.href) continue;

            if (link.href.indexOf(styleName) === -1) {
                link.disabled = true;
            } else {
                link.disabled = false;
            }
        }
    }

edited Feb 21, 2019 at 22:24

answered Feb 21, 2019 at 22:12

nick

7188 silver badges9 bronze badges

Comments

CodeToad · Accepted Answer · 2012-10-11 10:01:46Z

0

I was able to get this to work with setting the disabled property and by including a 'title' attribute the stylesheets. title property makes the stylesheet PREFERRED rather than PERSISTENT. see http://www.alistapart.com/articles/alternate/

answered Oct 11, 2012 at 10:01

CodeToad

4,7546 gold badges43 silver badges53 bronze badges

Comments

Rafael Vogel · Accepted Answer · 2014-05-08 00:33:54Z

0

I've found a great way (IMHO) to achieve this:

Let's suppose you know the exactly order of your stylesheet. Let's say you want to alternate stylesheet 0 and 1 (first and second):

To get a stylesheet state (enabled/disabled) you can try this (i.e. testing the second one):

document.styleSheets[1].disabled

...and it returns trueor false.

So to alternate you can write this code in an onclick event:

document.styleSheets[0].disabled = !( document.styleSheets[1].disabled = !(document.styleSheets[1].disabled) );

HTH!

answered May 8, 2014 at 0:33

Rafael Vogel

211 bronze badge

Comments

Danny '365CSI' Engelman · Accepted Answer · 2025-07-20 14:56:28Z

0

<link rel="stylesheet" href="style.css" onload="this.disabled=true">

Unlike the disabled attribute this will load the stylesheet and immediatly disable it

answered Jul 20 at 14:56

Danny '365CSI' Engelman

22.2k2 gold badges49 silver badges64 bronze badges

Collectives™ on Stack Overflow

enable disable stylesheet using javascript in chrome

7 Answers 7

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related