如何隱藏使用！的CSS背景圖片重要

我正在嘗試創建一個書籤，它將隱藏我當前正在查看的任何頁面上的圖像。它適用於移除<img>標籤，並創建一個試圖隱藏所有背景圖像的CSS樣式。我一直遇到的問題是使用!important指定的背景圖片。我無法弄清楚如何隱藏它們。如何隱藏使用！的CSS背景圖片重要

這裏是一個展示codepen問題：http://codepen.io/Chevex/pen/kbDcv

如果從背景圖像刪除!important那麼這一切工作正常。有任何想法嗎？

來源

2014-05-13 Chev

隱藏轉到後臺的div就像你在圖片中：var imgs2 = document.querySelectorAll（「DIV [風格* = '背景']」）; – dandavis

[Works great]（http://codepen.io/Chevex/pen/kbDcv）。謝謝dandavis。如果您將此作爲答案，我會接受它。 – Chev

可以隱藏以相同的方式背景div的，你做鏈接的代碼的img標籤：

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

來源

2014-05-13 20:50:13 dandavis

這是特別好，因爲它是一個書籤和**我**將始終使用現代瀏覽器和'querySelectorAll'應該始終工作:) – Chev

請注意，這將不會找到通過CSS類定義的背景圖像的div。 – Malk

@Malk：這是真的，但是OP不需要這種能力，並且它可能需要大量CPU重的dom迭代和屬性嗅探，如果不需要的話最好避免。也不可能嗅探在現場服務的CSS中定義的背景，這限制了這種方法的實用性和普遍性。 – dandavis

確保您的CSS出現在頁面上的CSS後面，並將!important重寫放到您的CSS上。此外，由於您指定您正在使用JavaScript，因此您可以將CSS作爲內聯CSS添加到實際元素上，並使用!important。重寫內聯的唯一重要的是 ~~用戶代理~~ 用戶重要的樣式表。 ^{[reference][example]}

來源

2014-05-13 20:43:15

如何識別哪個元素具有內聯樣式？或者我只需要遍歷整個DOM？（我懷疑可能會非常昂貴） – Chev

@AlexFord：請參閱我對您的問題的評論，以獲得無需大規模迭代的答案 – dandavis

感謝您的建議。 – Chev

正如其他人所指出的那樣，你可以使用較新的（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

來源

2014-05-13 20:51:37 Malk

如何隱藏使用！的CSS背景圖片重要

回答

相關問題