How to change CSS Parameter with JavaScript?

Question

I know it is not common way to modify CSS classes... but anyway >> I have the following function to change CSS parameter with JavaScript:

function changeCSSParameter(classId, param, value)
{
  var CSSRules;
  if (document.all)
  {
    CSSRules = 'rules';
  }
  else if (document.getElementById)
  {
    CSSRules = 'cssRules';
  }
  for (var i = 0; i < document.styleSheets[0][CSSRules].length; i++)
  {
    var classes = document.styleSheets[0][CSSRules][i].selectorText.split(/\s*,\s*/);
    for (var j = 0; j < classes.length; j++)
    {
      if (classes[j] == classId)
      {
        document.styleSheets[0][CSSRules][i].style.setProperty(param, value, '');
      }
    }
  } 
}

However this function would not work as I wish if style classes are defined in groups, such as

.first, .second
{
  color: red;
}

...because any change would apply to both classes. How can I solve this issue? Please advice.

No jQuery, please, just old-fashion JavaScript.

It's probably a learning exercise, or a "no libraries" requirement. — Robert Harvey, Jul 08 '12 at 02:24
@Lion - I love jQuery, but it is a 3rd party requirement :-/ — Ωmega, Jul 08 '12 at 02:26
@RobertHarvey - With full respect :: This is not a duplicate as indicated :: My question is about change of **parameter**, not the entire style class. — Ωmega, Jul 08 '12 at 02:28
Have you looked at every question in the sidebar to see if one fits? **==>** — Robert Harvey, Jul 08 '12 at 02:30
@RobertHarvey - none of them (on sidebar) fits, I believe... — Ωmega, Jul 08 '12 at 02:34
@RobertHarvey I haven't looked through the entire sidebar (I did look down a few at the top) but it's actually a somewhat rare phenomenon to alter a CSS rule rather than simply hit an element with a style attribute change which is what I believe JQuery typically does. It can be very relevant to want to add or alter an existing rule because any new HTML added will be hit by the new rule without any JS interventions whereas just hitting a specific element will only affect that element. IE less than 9 (at least) is going to tend to be a bit of a PITA on this front... — Erik Reppen, Jul 08 '12 at 03:19
...Because you can hit the thing you're dealing with in the moment, most devs aren't bothered with the DOM API stuff governing how we tweak actual CSS rules vs. doing the equivalent of ElementThatICareAbout.css || style.etc... — Erik Reppen, Jul 08 '12 at 03:25
...And of course the point I didn't get to right off the bat is that most people only care about the specific element they are hitting rather than hitting all elements at a stylesheet rule-change level because really... that takes 'nards. — Erik Reppen, Jul 08 '12 at 03:29

score 1 · Accepted Answer · answered Jul 08 '12 at 03:29

My first question is how sure you are about the inference that the existence of document.all implies that a stylesheet will have a rules property and its nonexistence implies that it will have a cssRules property? Because that seems rather sketchy to me? What is it based on?

But assuming that it is a reasonable inference, why in the world are you making that CSSRules calculation on every call to your function? Calculate it once at start-up and store it, returning your function inside a closure that contains the value.

That said, on to your main problem...

Your code will only work if the individual selectors (inside the comma-separated groups of selectors) are single class selectors such as .myClass. Anything even slightly more complicated, such as div.myClass won't work, correct? If that's all you're trying to do, I think I have a (fairly obnoxious, but workable) solution: On encountering a comma-separated solution where one of them is a match, write new rules for each of the selectors, cloning the existing rule. Then for the one that matches your class name, change the relevant property. Finally, remove the original rule.

It's not fun, and it makes several assumptions that are clearly not warranted in the general case, but look like they might match what you're trying to do in your code.

Hey, I did say it was obnoxious! :-)

+1 for obnoxious. You go... something... guy who has probably followed quirksmode.org at some point... — Erik Reppen, Jul 08 '12 at 03:33
For some reason, `document.getElementsByTagName("iframe")[0].style['-o-transform'] = "rotate(10deg) scale(1.25, 1.25)";` is not working and I made it work by change of StyleSheet class as shown in my code. I don't know why simple `.style` is not working :-/ That is the only reason why I do this stupid workaround... — Ωmega, Jul 08 '12 at 03:38
@ErikReppen: Does Quirksmode really suggest that? I've had a lot of respect for PPK over the years, but I would certainly never count on that connection. It seems extremely tenuous. — Scott Sauyet, Jul 08 '12 at 12:57

How to change CSS Parameter with JavaScript?

1 Answers1