Search code examples
javascripthtmlcssimagebookmarklet

How to hide CSS background images that use !important

I'm trying to create a bookmarklet that will hide images on any page I'm currently viewing. It works for removing <img> tags and it creates a CSS style that tries to hide all background images. The issue I keep encountering are background images that are specified with !important. I can't figure out how to hide them.

Here is a codepen demonstrating the issue: http://codepen.io/Chevex/pen/kbDcv

If you remove the !important from the background image then it all works fine. Any ideas?

Solution

  • you can hide divs with backgrounds in the same manner as you do img tags in the linked code:

    var imgs=document.querySelectorAll("div[style*='background']");
for (var i=0;i<imgs.length;i++) {
   imgs[i].style.visibility="hidden";
}