Question

我正在尝试创建一个书签，隐藏我正在查看的任何页面上的图像。它适用于删除<img>标记，并创建一个试图隐藏所有背景图像的CSS样式。我遇到的问题是使用!important指定的背景图片。我无法弄清楚如何隐藏它们。

以下是展示该问题的代码：http://codepen.io/Chevex/pen/kbDcv

如果您从背景图片中删除!important，那么一切正常。有什么想法吗？

Answer 1

确保您的CSS出现在页面上的CSS之后，并在您的CSS上放置!important覆盖。此外，由于您指定使用JavaScript，因此可以将CSS作为内联CSS添加到实际元素上，并使用!important。覆盖内联重要的唯一内容是~~用户代理~~用户重要样式表。^{[reference] [example]}

Answer 2

正如其他人所指出的，您可以使用较新的（IE9 +）querySelectorAll功能：

function hideImages() {
  var d = document,s = window.getComputedStyle;
  Array.prototype.forEach.call(
    d.querySelectorAll("body *"),
    function(el){
      if (s(el).backgroundImage.match(/url/) || 
         el.tagName === 'IMG'){
          el.style.visibility="hidden";
      }
    }
  );
}

$('button').click(hideImages);

http://codepen.io/anon/pen/rBnIx

更新为包含通过CSS设置的背景图像。

尽管如此，通过隐藏背景图像的任何东西，你可能会失去很多。你可能有更好的运气只是关闭该财产。您可以像上面一样检查每个元素的计算样式，也可以像下面一样设置它们。下面的函数使用setProperty覆盖!important，它也是IE9 +。

function hideImages() {
  var a=document.querySelectorAll("body *"),i=a.length;
  function _f(n){
         if (n.tagName === 'IMG') n.style.visibility="hidden";
         n.style.setProperty("background-image", "none", "important");
  };
  while(--i) _f(a[i]);
}

http://codepen.io/anon/pen/tnrdH

Answer 3

您可以使用与链接代码中的img标记相同的方式隐藏具有背景的div：

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

如何隐藏使用！important的CSS背景图片

3 个答案: