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？

回答

相關問題