javascript - 为什么 js 关键帧 (cssrules) 脚本不能与 IE edge 一起使用，而它可以在 chrome 和 firefox 中使用？

Question

为什么将在codepen链接中看到的秒时间的js关键帧（cssrules）脚本不适用于IE EDGE，并且它在chrome和firefox中使用两种不同的解决方案在以下链接中具有相同的结果

解决方案 1

function clockRingSecond(angle, key) {
  "use strict";
  var d = document,
      stylesheet = d.styleSheets[0],
      rule = stylesheet.cssRules,
      i = rule.length,
      keyframes,
      keyframe,
      n = "spinRing";
  while (i--) {
    keyframes = rule.item(i);
    if (
      (keyframes.type === keyframes.KEYFRAMES_RULE ||
       keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE ||
       keyframes.type === keyframes.MOZ_KEYFRAMES_RULE ||
       keyframes.type === keyframes.MS_KEYFRAMES_RULE ||
       keyframes.type === keyframes.O_KEYFRAMES_RULE) &&
      keyframes.name === n
    ) {
      rule = keyframes.cssRules;
      i = rule.length;
      while (i--) {
        keyframe = rule.item(i);
        if (
          (keyframe.type === keyframe.KEYFRAME_RULE ||
           keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE ||
           keyframe.type === keyframe.MS_KEYFRAME_RULE) &&
          keyframe.keyText === key
        ) {
          keyframe.style.webkitTransform = "rotate(" + angle + "deg)";
          keyframe.style.msTransform = "rotate(" + angle + "deg)";
          keyframe.style.transform = "rotate(" + angle + "deg)";
          break;
        }
      }
      break;
    }
  }
}
secondTimeHand();

和

解决方案 2

function seckey(ruleText) {
  var sheets = document.styleSheets;
  if (sheets.length == 0) {
    var style = document.createElement("style");
    style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);
  }
  var sheet = sheets[sheets.length - 1];
  sheet.insertRule(
    ruleText,
    sheet.rules ? sheet.rules.length : sheet.cssRules.length
  );
}
secondTimeHand();

这两个解决方案我在这里的一些帖子中找到了它。

请帮助并提前感谢您

请注意，它以前适用，现在停止

标签： javascripthtmlcss