CODEWITHSUNDEEP
javascriptstylesheet
CodeToad
CodeToad

Reputation: 4724

enable disable stylesheet using javascript in chrome

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

Upvotes: 2

Views: 8632

Answers (6)

nick
nick

Reputation: 688

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

Upvotes: 1

Rafael Vogel
Rafael Vogel

Reputation: 21

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!

Upvotes: 0

Bruce MacKenzie
Bruce MacKenzie

Reputation: 91

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

Upvotes: 2

CodeToad
CodeToad

Reputation: 4724

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/

Upvotes: 0

kennebec
kennebec

Reputation: 104780

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

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

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 {
 ...
}

Upvotes: 2

Related Questions