如何隐藏使用!重要的CSS背景图像

How to hide CSS background images that use !important

本文关键字：重要的 CSS 背景 图像 何隐藏 隐藏      更新时间：2023-09-26

我正在尝试创建一个bookmarklet，它将隐藏我当前正在查看的任何页面上的图像。它用于删除<img>标签，并创建一个试图隐藏所有背景图像的CSS样式。我不断遇到的问题是用!important指定的背景图像。我不知道怎么把它们藏起来。

下面是演示问题的代码依赖:http://codepen.io/Chevex/pen/kbDcv

如果你从背景图像中删除!important，那么一切都可以正常工作。什么好主意吗?

确保您的CSS出现在页面上的CSS之后，并将!important覆盖放在您的CSS上。此外，由于您指定使用JavaScript，因此可以将CSS添加为实际元素上的内联CSS，并使用!important。唯一覆盖inline important的是user agent user important样式表[reference][example]

正如其他人指出的那样，您可以使用较新的(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

你可以像在链接代码中隐藏img标签一样隐藏带有背景的div:

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