-3

I'm having a problem displaying the correct CSS when offering an alternative CSS.

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 in body:

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

Note: the CSS is working, each CSS file simply has a different background-color property.

Joel
  • 7
  • 1
  • 4

2 Answers2

0

your anchor should call a javascript function that adds 

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

dynamically to your document. In jquery this could be done like this:

$(document.body).append('<link href="css2.css" rel="stylesheet" type="text/css" />');
Lodewijk Bogaards
  • 19,777
  • 3
  • 28
  • 52
  • Some people dont like jQuery i usually tell from the simple code they use. But i like your way also. The dollar sign and the syntax may scare them off but some people only want jQuery solution... anyways. Just trying to help out. – kingdomcreation Mar 06 '13 at 18:41
0
<link href="css1.css" rel="stylesheet" type="text/css" /> 
<link href="css1.css" id="css2"  rel="stylesheet" type="text/css" />

and this href in body:

<a href="#" onclick="document.getElementById('css2').href='css2.css'">Change</a>
kingdomcreation
  • 659
  • 4
  • 10
  • A [`` element](http://www.w3.org/TR/html5/document-metadata.html#the-link-element) without a `href` attribute is invalid. – Bergi Mar 06 '13 at 19:01
  • And no this is not going to load the css1.css file twice but just respect the previous comment. Thanks – kingdomcreation Mar 06 '13 at 19:05