JS로 CSS 이미지 변경

Question

나는 Adblock이 탐지되었을 때 하나의 이미지를 표시하고 Adblock이 탐지되지 않을 때 하나의 이미지를 표시하는 Adblock 탐지기를 통합하려고 시도 해왔다. 유일한 문제는 이미지가 CSS에 의해 표시되고 서식 지정된다는 것입니다. 그렇다면 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; 
} 

Answer 1

JS :

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

CSS :

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

또는 유사 요소를 동적으로 삽입 :

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