我正在嘗試創建一個書籤,它將隱藏我當前正在查看的任何頁面上的圖像。它適用於移除<img>
標籤,並創建一個試圖隱藏所有背景圖像的CSS樣式。我一直遇到的問題是使用!important
指定的背景圖片。我無法弄清楚如何隱藏它們。如何隱藏使用!的CSS背景圖片重要
這裏是一個展示codepen問題:http://codepen.io/Chevex/pen/kbDcv
如果從背景圖像刪除!important
那麼這一切工作正常。有任何想法嗎?
我正在嘗試創建一個書籤,它將隱藏我當前正在查看的任何頁面上的圖像。它適用於移除<img>
標籤,並創建一個試圖隱藏所有背景圖像的CSS樣式。我一直遇到的問題是使用!important
指定的背景圖片。我無法弄清楚如何隱藏它們。如何隱藏使用!的CSS背景圖片重要
這裏是一個展示codepen問題:http://codepen.io/Chevex/pen/kbDcv
如果從背景圖像刪除!important
那麼這一切工作正常。有任何想法嗎?
可以隱藏以相同的方式背景div的,你做鏈接的代碼的img標籤:
var imgs=document.querySelectorAll("div[style*='background']");
for (var i=0;i<imgs.length;i++) {
imgs[i].style.visibility="hidden";
}
確保您的CSS出現在頁面上的CSS後面,並將!important
重寫放到您的CSS上。此外,由於您指定您正在使用JavaScript,因此您可以將CSS作爲內聯CSS添加到實際元素上,並使用!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]);
}
隱藏轉到後臺的div就像你在圖片中:var imgs2 = document.querySelectorAll( 「DIV [風格* = '背景']」); – dandavis
[Works great](http://codepen.io/Chevex/pen/kbDcv)。謝謝dandavis。如果您將此作爲答案,我會接受它。 – Chev