Dynamically generate CSS code using Javascript

Question

Possible Duplicate:
Changing a CSS rule-set from Javascript

Dear experts,

Is there a way to dynamically generate a CSS stylesheets using Javascript according to what the users fill in on a form (user interface)?

If this isn't possible with Javascript, could someone point me to the right direction. Ruby on rails would also be fine.

Thanks

score 2 · Answer 1 · edited May 02 '13 at 14:56

2

Yes you can do that.. Lets say you have a input fields.. and whenever user changes value in the input field, then you want to add some special css..

 $('#form input').change(function(){
     $('#someElement').css({
              'background-color': 'green';
          });
 });

edited May 02 '13 at 14:56

Sylvain Defresne

42,429
12
75
85

answered Aug 22 '10 at 18:40

kapser

621
3
11

this probably only sets the element "style", but the preferred way would be to dynamically define a "class" which can be added like $('#someElement').addClass(newlyCreatedClassName) – xorcus Dec 24 '14 at 14:41

score 2 · Accepted Answer · answered Aug 22 '10 at 19:09

Sure you can. But you have to validate the user input. And write some kind of a css-processor to search the input text for the elements themselves and the according css-rules.

Finding css-rules is easy - they are all inside the braces {...} and the elements to which you apply the rules are outside the braces {...} .an .element {...}

You'll end up with something like this css playground

Dynamically generate CSS code using Javascript

2 Answers2