Question

相关问题及不满意的答案：Changing CSS Values with Javascript

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

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

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

我正在查看代码here，这让我觉得有点过于苛刻，无法使用计时器。从它的外观来看，我对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 使用相同的选择器但使用不同的值调用该函数。

Answer 2

JQuery .animate()应该做你想要的，它是跨浏览器。

从Javascript更改（全局）CSS样式

2 个答案: