ansaurus

Question

How to redefine CSS classes with Javascript

Answer 1

A:

Something like

function changeColourful(colorRGB, backgroundColorRGB)
 {changeColor (document, colorRGB, backgroundColorRGB)}

function changeColor (node, color, changeToColor)
{
   for(var ii = 0 ; ii < node.childNodes.length; ii++)
   {
     if(node.childNodes[ii].childNodes.length > 0)
     {
        changeColor(node.childNodes[ii], color, changeToColor);
     }

      if(node[ii].style.backgroundColor == color)
      {
        node[ii].style.backgroundColor = changeToColor;
      }

   }


}

Kevin 2008-11-05 17:50:10

Answer 2

+4 A:

I would actually implement this server-side; just store the user's preferred colours in their session (via cookies or whatever is nice and easy for you) and generate the CSS dynamically, i.e.

colourful {
  color: ${userPrefs.colourfulColour};
  background-color: ${userPrefs.colourfulBackgroundColour};
}

If it really suits you much better to do this via Javascript, you can manipulate the CSS using Javascript. See, for instance:

alex 2008-11-05 17:58:02

I wish I could vote for this five times.

eyelidlessness 2008-11-05 18:07:59

If you go sever-side, isolate the server-dependent items from the rest of the styles, so that the browser can still cache the rest of your style sheet.

Joel Coehoorn 2008-11-05 18:12:27

You may also need to include a cache-breaker in the server-generated css.

Joel Coehoorn 2008-11-05 18:15:53

@Joel: Or you could just set up headers correctly.

eyelidlessness 2008-11-05 18:17:32

couldn't agree more - you definitely want this to be server side and in paths away from cachable/static css rules

danpickett 2008-11-05 22:00:09

This is a great answer for a server-side solution. I had tried to set-up the question as a sort of general "tweaking css with javascript", which is why EndangeredMassa got the green check.Somebody should ask the question that goes with this answer.

Axel 2008-11-07 14:28:09

Answer 3

+1 A:

First check if document.styleSheets is defined (see @alex's response).

If not, this question should be helpful:
http://stackoverflow.com/questions/210377/get-all-elements-in-an-html-document-with-a-specific-css-class

See the link in the accepted answer and my response at the bottom.

This is only one piece of the answer. You'll still have to go and apply the new values use each element's style property.

Joel Coehoorn 2008-11-05 18:04:02

Answer 4

+1 A:

Quick example for a specific div/colour - which could be dynamically passed in via a function

document.getElementById('Your Div Name Here').style.background = 'white';

Or, to change the class of the specified item

document.getElementById('Your Div Name Here').classname = 'newclassname'

That's assuming you can specify the divs in this way, if not, a combination of this and the node looping solution Kevin showed should do the trick

Katy 2008-11-05 18:09:39

I think .classname should be .className. I think!

Micky McQuade 2008-11-05 21:57:55

Answer 5

+1 A:

I don't know about manipulating the class directly, but you can effectively do the same thing. Here's an example in jQuery.

$('.colourful').css('background-color', 'purple').css('color','red');

In plain javascript, you would have to do more work.

EndangeredMassa 2008-11-05 18:15:52

This is what I was looking for (though the `'purple'` and `'red'` should be `backgroundColorRGB` and `colorRGB` respectively)

Axel 2008-11-06 16:00:47

I'm glad to help!The purple/red stuff was just for example purposes. You wouldn't want me to do all the work, would you? (I kid. I kid.)

EndangeredMassa 2008-11-06 16:27:10

Answer 6

A:

var setStyleRule = function(selector, rule) {
    var stylesheet = document.styleSheets[(document.styleSheets.length - 1)];
    if(stylesheet.addRule) {
        stylesheet.addRule(selector, rule)
    } else if(stylesheet.insertRule) {
        stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
    }
};

eyelidlessness 2008-11-05 18:16:35

Answer 7

+3 A:

jQuery:

function changeColourful(colorRGB, backgroundColorRGB)
{
    $('.colourful').css({color:colorRGB,backgroundColor:backgroundColorRGB});
}

If you wanted the changes to persist across pages you would would have to store them in a cookie and reapply the function every time.

Ken 2008-11-05 18:18:26

Ill throw may weight behind you.

Brian G 2008-11-05 18:47:28

Answer 8

A:

I just tried using an empty <style> tag in the <head>, then filling it dynamically. Seems to work in ff3, at least.

So :

In the <head> , insert something like :

<style id="customstyle" type="text/css"></style>

Now you can use something like jquery to replace or append its content :

for replacing :

$("#customstyle").text(".colourful { color: #345 ; }");

appending :

 $("#customstyle").append(".colourful { color: #345 ; }");

If you want to save it somewhere, just grab the content :

  var csscontent =  $("#customstyle").text();

.. then you could send it back to server through ajax.

vincent 2008-11-05 21:55:50

ansaurus

tags:

views:

answers:

How to redefine CSS classes with Javascript

related questions