更改CSS圖像由JS

我一直在試圖合併一個Adblock檢測器，它將在檢測到Adblock時顯示一個圖像，而在檢測到Adblock時顯示另一個圖像。唯一的問題是圖像被CSS顯示和格式化。那麼有沒有辦法改變CSS通過js顯示的圖像？更改CSS圖像由JS

HTML：

<div id="adblockFrame"> 
<script type="text/javascript" src="js/advertisement.js"></script> 
<script type="text/javascript"> 
    if (document.getElementById("TestAdBlock") != undefined) 
    { 
     document.getElementById('adblockFrame').innerHTML="<img src='images/ImageHolderno.png'  alt='no adblock' />"; 
    } 
    else 
    { 
     document.getElementById('adblockFrame').innerHTML="<img src='ImageHolderyes.png' alt='Adblock detected!' />"; 
    }

記住，圖像佔位符和無效的，併爲圖像是由CSS定義不服務於一個目的。

CSS：

#mainPicture .picture 
{ 
position:relative; 
width:650px; 
height:325px; 
top:10px; 
background-image:url(../images/minibg1.png); 
background-repeat:no-repeat; 
margin-left:10px; 
}

來源

2014-01-14 AlexCatch

向該元素添加一個類並在CSS中對其執行操作。 –

您可以設置兩個類似的CSS類並使用JavaScript切換它，而不是嘗試更改單個CSS類的屬性。 – Jasen

JS：

document.getElementById('adblockFrame').className = 'adblockersSuck';

CSS：

.adblockersSuck { 
    background:url(ImageHolderyes.png) no-repeat; 
}

或用僞元素動態插入：

.adblockersSuck:after { 
    content:url(ImageHolderyes.png); 
}

來源

2014-01-14 23:27:55

我將如何合併第三部分「僞元素」 – AlexCatch

[開始閱讀]（https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudoelements）。 –

好吧，我已經有兩個圖像顯示基於js的輸出。唯一的問題是，當Adblock啓用時，Adblock後面顯示的圖像被禁用圖像，並且不在正確的位置。 – AlexCatch

更改CSS圖像由JS

回答

相關問題