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

我正在做一个Chrome扩展，我想使用CSS关键帧动画制作页面上的所有图像，但我也希望它使用JS切换开/关。我已经想出了如何开启和关闭，但我应该如何从JS执行CSS？我所能想到的只是找到所有图像，并添加.animation类，但它似乎不起作用。Chrome扩展...从JS执行CSS？

的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; 
}

来源

2015-12-21 ooohfff

为什么要用'Array.prototype.forEach.call（）'？不会有一个简单的'document.getElementsByTagName（）'和for循环做到这一点吗？ –

@AndrueAnderson也许有一种强烈的倾向于函数式'forEach' for'（;;）'循环 – Xan

@ooohfff，你需要更好地解释你的意思是“执行CSS”。 – Xan

请更换

el.addClass("animation");

与

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

来源

2016-01-04 06:31:17

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

回答

相关问题