JavaScript Forum

**reQuorter** · 09:58 AM

Hello guys!

I want to write script in JavaScript that will change CSS style with radio buttons. Here is my code:

HTML Code:

<input type="radio" name="style" onclick="changeCSS(1);" />Style 1<br />
<input type="radio" name="style" onclick="changeCSS(2);" />Style 2<br />

Here is my JavaScript code:

Code:

function changeCSS(stylCSS)
{
this.stylCSS = stylCSS;

if (stylCSS == "1") { document.write('<link rel="stylesheet" href="style.css" type="text/css">'); }
if (stylCSS == "2") { document.write('<link rel="stylesheet" href="style2.css" type="text/css">'); }
}

This isn't working... when I click button my page starts to loading forever...
Please help, I'm JS beginner.

**chrishirst** · 10-22-2008, 09:43 AM

Quote:

This isn't working...

And it never will!

writing the stylesheet reference in like that will only work at page load.

You will have to save the value to a cookie and reload the page.

**reQuorter** · 10-22-2008, 09:57 AM

Problem resolved:

HTML Code:

<head>
<link id="stylesheet" rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript">
function changeCSS(stylCSS)
{
var ss=document.getElementById('stylesheet')

if (stylCSS == "1")
 ss.href='style.css';
else
 ss.href='style2.css';
}
</script>
</head>
<body>
<input type="radio" name="style" onclick="changeCSS(1);" />Style 1<br />
<input type="radio" name="style" onclick="changeCSS(2);" />Style 2<br />
</body>

**wayfarer07** · 10-22-2008, 10:05 AM

That's an unusual approach. Did you test it in all the browsers?
You can import stylesheets like this:

Code:

var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'example.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);

As far as changing the style of just one element on the page, you can do it with that element's className or style property.