javascript - 从 Javascript 更改(全局)CSS 样式

Question

相关问题答案不尽如人意:Changing CSS Values with Javascript

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

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

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

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

因此，我正在寻找一种解决方案，让我可以将对应于特定类的 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 调用具有相同选择器但不同值的函数。