Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

so i am pretty new to css and javascript and i was wondering if you could make a script that allows you to change what stylesheet the site uses. like say you had a green theme where everything was shades of green you would make so the user can change it to red with the press of a button. anyone have any idea how to do this?

share|improve this question

2 Answers

up vote 3 down vote accepted

You can set an Id to the link tag and switch the css at runtime.

HTML

<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />

JS

document.getElementById('buttonID').onclick = function () { 
    document.getElementById('theme_css').href = '../red.css';
};
share|improve this answer
up vote 0 down vote

Yes, you can change CSS with Javascript. See this tutorial for more info. It basically links multiple stylesheets like this:

<link rel="stylesheet" type="text/css" title="blue"
   href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink"
   href="http://example.com/css/pink.css">

And then uses Javascript to change it:

<form>
<input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue">
<input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink">
</form>

The switch_style() function is written in that tutorial.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.