从Javascript更改（全局）CSS样式

回答不满意的相关问题：

这是我想做的。我希望能够将页面元素的类设置为某个值，并让浏览器为其设置动画，例如一个表td，其背景将设置为rgb255*CostTime*.5+.5,0,0

通过设置计时器，我可以轻松地对单个元素执行此操作。但是我可能想让多个元素都有这个属性，并且必须为每个元素跟踪一个计时器不是一个好主意

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

我正在看代码，它让我觉得有点太重了，我无法从计时器中使用。从外观上看，我对changecss之类的函数的每次调用都会将整个css规则附加到每个样式表中。这将严重污染样式表的内部，如果我每33毫秒在循环中调用一次，可能会导致失控的内存泄漏

---

因此，我正在寻找一种解决方案，它可以让我专注于与特定类对应的css条目中的rgb颜色设置。并对其进行修改。在这种情况下，我实际上不需要检索原始设置。这能做到吗？如果可能的话，我想支持IE9，尽管IE6、7、8已经把我的项目搞得一团糟，我已经放弃了它们。

JQuery应该做你想做的事情，而且它是跨浏览器的。

这个答案有基础。作为一般解决方案，您需要在样式表中查找类的最后一次出现，即迭代所有样式表以查找类规则的最后一次出现，然后在此之后添加新规则或修改最后一次规则

如果您知道该类只存在一次，那么只需获取第一次出现并修改它即可。或者，如果您知道该类根本不在样式表中，只需将其添加到任意位置，比如添加到最后一个样式表中，然后从那里开始

通过存储对规则的引用并使用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调用不同的值。

我想知道有人建议jQuery需要多长时间。我同意jQuery让生活更简单，但问题是关于普通JavaScript。你确定jQuery动画修改CSS规则吗？我想你会发现它修改了实际的元素样式属性。我不清楚这个问题是否是关于vanilla JavaScript的。我还是新手，当一个问题被标记为Javascript时，这是否意味着仅仅是普通的Javascript？jQuery可以选择具有特定类的所有元素，这将具有相同的效果。更改类属性而不是类中所有元素的属性是否更有效？我将在下一个项目中使用jQuery：结束这个项目。我相信deleteRule，可能还会将整数索引作为参数引入规则列表，而不是从列表中引用规则。正如所写的那样，对正在传递的规则的引用被误解了；我的测试表明浏览器只是抛出了工作表中的第一条规则，而不是被替换的规则。该死！在计时器中使用此方法会导致chrome出现非常严重的问题。歌剧院处理得很好。但在Chrome中，选择菜单存在严重的整体迟钝和问题。一年半后，也可能是那时，更好的方法是使用CSS3转换。