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");
  });
});

spin.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";

Chrome扩展......从JS执行CSS？

1 个答案: