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](https://developer.mozilla.org/en-US/docs/DOM/stylesheet/disabled) to work, too — Bergi, Oct 10 '12 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, Oct 10 '12 at 17:53

score 2 · Answer 1 · answered Oct 10 '12 at 17:48

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 '12 at 17:48

Diodeus - James MacFarlane

112,730
33
157
176

Not what he's asking for. Swapping is supported natively using `rel="alternate stylesheet"` http://www.w3.org/Style/Examples/007/alternatives.en.html and he wants to swap using JavaScript. – Prinzhorn Oct 10 '12 at 17:52
Then he should be removing/injecting the LINK to the stylesheet in the DOM. – Diodeus - James MacFarlane Oct 10 '12 at 17:54
thank you for the 3 options: body tag subclass, "alternate stylesheet" and replacing the link. I am currently looking into this article: http://www.alistapart.com/articles/alternate/ – CodeToad Oct 11 '12 at 09:46

score 2 · Answer 2 · answered Oct 10 '12 at 20:38

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 '12 at 20:38

kennebec

102,654
32
106
127

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. – CodeToad Oct 11 '12 at 09:26

score 2 · Answer 3 · answered Jun 13 '13 at 18:35

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).

score 0 · Accepted Answer · answered Oct 11 '12 at 10:01

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 '12 at 10:01

CodeToad

4,656
6
41
53

score 0 · Answer 5 · answered May 08 '14 at 00:33

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!

nick · Answer 6 · 2019-02-21T22:24:16.640

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;
            }
        }
    }

enable disable stylesheet using javascript in chrome

6 Answers6

Linked