从Javascript更改(全局)CSS样式

Question

相关问题与不满意的答案:用Javascript更改CSS值

这就是我想要做的.我希望能够将页面元素的类设置为某个值,并让浏览器为其设置动画,例如将背景设置为的表格td rgb(255*(cos(time)*.5+.5),0,0).

通过设置计时器,我可以轻松地为单个元素执行此操作.但我可能希望有多个元素具有此属性,并且必须跟踪每个元素的计时器并不是一个好主意.

所以我想做的是能够从javascript更改CSS值.

我正在看这里的代码,它让我觉得有点太笨重了,我不能使用计时器.从它的外观来看,我对函数的每次调用都会让changecss我将每个css规则附加到每个样式表中.这将在内部主要污染样式表,如果我每隔33ms调用一次循环,可能会导致内存泄漏.

所以我正在寻找一种解决方案,让我可以在对应于特定类的css条目中的rgb颜色设置中进行调零.并修改它.在这种情况下,我实际上不需要检索原始设置.可以这样做吗？如果可能的话,我想支持IE9,虽然IE 6,7,8已经搞砸了我的项目,以至于我已经放弃了它们.

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调用不同的值.