-8

I've got these two CSS files in my head section:

<link href="css1.css" rel="stylesheet" type="text/css" /> 
<link id="css2" href="css2.css" rel="stylesheet" type="text/css" />

and this href: 

<a href="#" onclick="document.getElementById('css2').href='css2.css'">Change</a>

The page is showing css2 (which has background-color set to green) but I want it to show css1(red), and then by clicking the css2 link it should change to css2.

Joel
  • 7
  • 1
  • 4

6 Answers6

2

You can just disabled/enable the second stylesheet via the disabled property:

document.getElementById('css2').sheet.disabled = true;

or the whole <link> element:

document.getElementById('css2').disabled = true;

That way the declarations will not overwrite the ones from the first. Your try of changing the href of the link would work as well, yet for that you would need only one <link> tag that is switched between "css1.css" and "css2.css".

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
0

You can always add another external CSS file dynamically with JavaScript (or in this case jQuery):

$('head').append('<link rel="stylesheet" href="/alternative.css" type="text/css" />');
Alfred Xing
  • 4,406
  • 2
  • 23
  • 34
0

Create a default stylesheet for the site and create other stylesheets for the specific users. Then override default styles with them with javascripts or php

madhushankarox
  • 1,448
  • 1
  • 13
  • 17
0

If you are asking "How can I switch between the two stylesheets when a user clicks one of the links", I would sugest the following approach:

  • Leave your default stylesheet as is.
  • Preface all your style declarations in your second stylesheet with some unique class, i.e. alternative-css
  • When the user clicks on the "alternative" link, add a class to a high level element (such as <html>, <body> or wrapper <div>

For example:

HTML:

<body>
    <a href="#" id="main">Main Style</a>
    <a href="#" id="alt">Alternative Style</a>
    <div id="wrapper">
        <p>Some text</p>
    </div>
</body>

Stylesheet:

#wrapper {
    background: #000;
}
p {
    color: #fff;
}

Alternative Stylesheet:

.alternative-css #wrapper {
    background: #fff;
}
.alternative-css p {
    color: #000;
}

JS:

$('#main').click(function(){$('body').removeClass('alternative-css')});
$('#alt').click(function(){$('body').addClass('alternative-css')});

PS: I know you didn't tag this question with jQuery... but this is meant more as a concept and it shouldn't be too hard to write the click handlers in vanilla JS.

Steve
  • 8,609
  • 6
  • 40
  • 54
0

The easiest way to do this that I have found is to set a class in the <body> tag and use one CSS file, but defining two sets of CSS definitions, prefixing each set with a class name.

Set a default class (e.g., <body class="bodyClass1">) and then, when you want to change the look, you simply update the class to the other class using JavaScript.

The benefits of this are that, all classes are loaded at page load and any common styles can be coded outside of the "class specific" definitions.

Example:

body {...}
a {...}
div {font-weight: bold;}

.bodyClass1 div {font-size: 10px;}

.bodyClass2 div {font-size: 12px;}
talemyn
  • 7,822
  • 4
  • 31
  • 52
0

It does not work because you have both files being loaded when the page loads. So of course it will be the color of the second file from the start since both files are there.

The page needs to start with one file.

Other option is you load both files, but the rules are based off a class on the body.

file1.css

body { background-color: yellow; }
h1 { color: red }

file2.css

body.alt {background-color: green; }
body.alt h1 { color : blue; }

And with the JavaScript you add the class.

document.body.className = document.body.className==="alt" ? "" : "alt";
epascarello
  • 204,599
  • 20
  • 195
  • 236