CODEWITHSUNDEEP
javascriptcss
Axel
Axel

Reputation: 213

How to redefine CSS classes with Javascript

Let's say we have defined a CSS class that is being applied to various elements on a page.

colourful
{
    color: #DD00DD;
    background-color: #330033;
}

People have complained about the colour, that they don't like pink/purple. So you want to give them the ability to change the style as they wish, and they can pick their favourite colours. You have a little colour-picker widget that invokes a Javascript function:

function changeColourful(colorRGB, backgroundColorRGB)
{
    // answer goes here
}

What goes in the body of that function?

The intent being that when the user picks a new colour on the colour-picker all the elements with class="colourful" will have their style changed.

Upvotes: 6

Views: 11344

Answers (9)

megar
megar

Reputation: 493

This is a complete example to change a background-image into a stylesheet. First part locate the right stylesheet. Here, I wanted the last one, whose href contained "mycss.css". You can also use the title property.

Second part locate the right rule. Here, I put a marker "MYCSSRULE" so I can locate the right rule.

The css rule in the mycss.css is: #map td, MYCSSRULE { background-image:url("img1.png"); }

The third part just alters the rule.

This process does not work with internet explorer 6. (IE 8 is ok). Works with Firefox 3 and Webkit.

Hope it helped.

function changeBgImg(newimage) {
  var i,n;
  var ssheets = document.styleSheets;         // all styleSheets. Find the right one
  var ssheet;

  // find the last one whose href contain "myhref"
  n = ssheets.length;
  for (i=n-1; i>=0 ;i--) {
    var thisheet = ssheets[i];
    if ( (null != thisheet.href) && (thisheet.href.indexOf("mycss.css") != -1) ) {
      ssheet = thisheet; break;
    }
  }

  if ( (null == ssheet) || ("undefined" == typeof(ssheet.cssRules))) {
    // stylesheet not found or internet explorer 6
    return;
  }

  // find the right rule
  var rule;
  n = ssheet.cssRules.length;
  for (i=0; i<n; i++) {
    var r = ssheet.cssRules.item(i);
    if (typeof(r.selectorText) == "undefined") { continue; }
    if (r.selectorText.indexOf("MYCSSRULE") != -1) {
      rule = r; break;
    }
  }

  if (null == rule) {
    // not found
    return;
  }

  rule.style.backgroundImage = "url(" + newImage + ")";
}

Upvotes: 1

vincent
vincent

Reputation: 6608

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.

Upvotes: 4

Ken
Ken

Reputation: 78852

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.

Upvotes: 3

eyelidlessness
eyelidlessness

Reputation: 63519

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);
    }
};

Upvotes: 9

Joel Coehoorn
Joel Coehoorn

Reputation: 415705

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

If not, this question should be helpful:
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.

Upvotes: 2

EndangeredMassa
EndangeredMassa

Reputation: 17528

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.

Upvotes: 4

alex
alex

Reputation: 5201

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:

Upvotes: 7

user12035
user12035

Reputation:

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

Upvotes: 2

kemiller2002
kemiller2002

Reputation: 115490

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;
      }

   }


}

Upvotes: -1

Related Questions