我正在制作一个 Chrome 扩展程序,我想使用 CSS 关键帧动画使页面上的所有图像旋转,但我还希望它使用 JS 打开/关闭。我已经想出了如何打开和关闭,但我应该如何从 JS 执行 CSS?我能想到的就是找到所有图像,然后添加 .animation
类,但它似乎不起作用。
list .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;
}
最佳答案
请替换
el.addClass("animation");
与
el.className = el.className + " animation";
关于javascript - Chrome 扩展...从 JS 执行 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34404212/