Css - Apply different CSS rule based on user input

Question

I'm developing a web based source code editor. I'm thinking of adding support for themes (syntax highlighting).

//Default theme
.default-reserved-word
{
  background-color : red;
}

//Some other theme
.monokai-reserved-word
{
  background-color : green;
}

inside the editor each syntax highlightable word is surrounded by a span tag with the appropriate class:

....
<span class="default-reserved-word">def</span>method name
...

which I want to convert to (when the user clicks a "change theme" button)

....
<span class="monokai-reserved-word">def</span>method name
...

Is there a simple way of switching these CSS rules without going through all the elements and modifying the class attributes?

(FWIW, I need to support IE7+, FF3.6+)

Rather than switching the class names, I would load in a new stylesheet for each theme. — shanethehat
– shanethehat, Commented Aug 2, 2011 at 8:50
You can do this (rather tediously) using plain old Javascript, though I'd suggest a framework such as jQuery because it will make the process much simpler and faster. — Anthony Grist
– Anthony Grist, Commented Aug 2, 2011 at 8:52
@huhucat Don't forget to accept answers (not just for this question) if your question has been sufficiently answered. — Ben Everard
– Ben Everard, Commented Aug 2, 2011 at 9:18

Ben Everard · Accepted Answer · 2011-08-02 09:17:30Z

4

I'd suggest using a different method, perhaps have a theme class on a higher parent container:

<div class="theme-default">

And then use CSS like this:

.theme-default .reserved-word {
    color: blue;
}

Whilst this method is not exactly what you've asked for it will simplify the process of changing styles, for a start you won't have to search through loads of spans, finding the current class of theme-name + ' -reserved-word' (etc) and doing a string replace on them.

edited Aug 2, 2011 at 9:17

answered Aug 2, 2011 at 8:50

Ben Everard

13.8k14 gold badges69 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jackJoe Over a year ago

+1 I really like this method and it is a technique that is simple and at the same time clever.

huhucat Over a year ago

Wow, this is pretty slick! Thank you! :)

Madara's Ghost · Accepted Answer · 2011-08-02 08:57:29Z

0

Add a class name to the root element (<html>) and change that on use input.

.theme1 .reserved-word { color: red; }
.theme2 .reserved-word { color: green; }

and then change

<html class="theme1">

to

<html class="theme2">

with Javascript.

answered Aug 2, 2011 at 8:57

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

Comments

laurent · Accepted Answer · 2011-08-02 08:52:34Z

-2

You can use jQuery for that:

var elements = $('.default-reserved-word')
elements.removeClass('default-reserved-word');
elements.addClass('monokai-reserved-word');

answered Aug 2, 2011 at 8:52

laurent

91.2k83 gold badges310 silver badges445 bronze badges

2 Comments

Madara's Ghost Over a year ago

Changing all elements' classes is unneeded and inefficient. Instead, you can change a higher parent's classname and declare the CSS accordingly ;)

laurent Over a year ago

I guess I was replying too literally to his question. I sure got my share of -1s for that :D Swapping the CSS file would indeed be a much better solution.

Collectives™ on Stack Overflow

Css - Apply different CSS rule based on user input

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related