Chrome扩展程序…从JS执行CSS？

Question

我正在做一个Chrome扩展程序，我想使用CSS关键帧动画使页面上的所有图像旋转，但我也希望它使用JS来打开/关闭。 我已经弄清楚了如何打开和关闭，但是如何从JS执行CSS？ 我所能想到的就是只查找所有图像，并添加.animation类，但这似乎不起作用。

manifest.JSON

{
  "manifest_version": 2,

  "name": "SPINS",
  "description": "SPINS",
  "version": "1.0",
  "browser_action": { },

  "icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" },

  "background": {
    "scripts": ["background.js"]
  },

  "content_scripts": 
    [{
      "matches": ["<all_urls>"],
      "css": [ "spin.css"],
      "js": [ "content.js"]
      }],



  "permissions": [
   "activeTab"
   ]
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendMessage(tab.id,{});
});

content.js

var toggle = false;
chrome.runtime.onMessage.addListener(function() {
  toggle = !toggle;
  Array.prototype.forEach.call(document.querySelectorAll('img'), function(el) {
    el.addClass("animation");
  });
});

自旋CSS

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.animation {
    animation: 40s spin infinite linear;
}

Answer 1

请更换

el.addClass("animation");

与

el.className = el.className + " animation";