Change (common) CSS styles from Javascript

Question

related question with unsatisfactory answers: Changing CSS values ​​with Javascript

Here is what I want to do. I would like to be able to set the page element class for some value and activate its browser, for example the td table whose background will be set to rgb(255*(cos(time)*.5+.5),0,0).

I can easily do this for one item by setting a timer. But I might want several elements to have this property, and keeping track of the timer for each of them is a great idea.

So what I would like to do is to be able to change the CSS value from javascript.

I am looking at the code here and it seems to me that it is too hard for me to use with a timer. In appearance, every call I make to a type function changecssinvolves adding an entire CSS rule for each individual stylesheet. This will mainly foul the style sheets inside and will probably lead to a memory leak if I call it in a loop every 33 ms.

So, I'm looking for a solution that will allow me to reset the rgb color parameter in a css entry corresponding to a specific class. And change it. In this case, I really do not need to retrieve the original settings. It can be done? I would like to support IE9, if possible, although IE 6,7,8 is already very silent about my project, and I abandoned them.

Answer 1

. (.. , ), , .

, , . , , , (, ) .

, setTimeout.

, css:

/* Replace the cssText for rule matching selectorText with value
** Changes all matching rules in all style sheets
*/
function modifyStyleRule(selectorText, value) {
  var sheets = document.styleSheets;
  var sheet, rules, rule;
  var i, j, k, l;

  for (i=0, iLen=sheets.length; i<iLen; i++) {
    sheet = sheets[i];

    // W3C model
    if (sheet.cssRules) {
      rules = sheet.cssRules;

      for (j=0, jLen=rules.length; j<jLen; j++) {
        rule = rules[j];

        if (rule.selectorText == selectorText) {
          removeRule(sheet, rule);
          addRule(sheet, selectorText, value);
        }
      }

    // IE model
    } else if (sheet.rules) {
      rules = sheet.rules;

      for (k=0, kLen=rules.length; k<kLen; k++) {
        rule = rules[k];

        // An alternative is to just modify rule.style.cssText,
        // but this way keeps it consistent with W3C model
        if (rule.selectorText == selectorText) {
          removeRule(sheet, rule);
          addRule(sheet, selectorText, value);

          // Alternative
          // rule.style.cssText = value;
        }
      }
    }
  }
}

/* Remove rule from supplied sheet
*/
function removeRule(sheet, rule) {

  // W3C model
  if (typeof sheet.deleteRule == 'function') {
    sheet.deleteRule(rule);

  // IE model
  } else if (sheet.removeRule) {
    sheet.removeRule(rule);
  }
}

/* Add rule from supplied sheet
** Rule is added as last rule in sheet
*/
function addRule(sheet, selectorText, value) {

  // W3C model
  if (typeof sheet.insertRule == 'function') {
    sheet.insertRule(selectorText + ' {' + value + '}', sheet.cssRules.length);

  // IE model
  } else if (sheet.addRule) {
    sheet.addRule(selectorText, value, sheet.rules.length);
  }
}

, , , setTimeout.

Answer 2

JQuery . animate() , , .