Changing CSS image by JS

Question

I've been trying to incorporate an Adblock detecter that will display one image when Adblock is detected and another when Adblock isn't detected. The only problem is that the image is displayed and formatted by CSS. So is there a way to change the image that CSS displays through 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!' />";
    }

Bear in mind that the image place holders and void and do not serve a purpose as the image is defined by 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;
}

You could set up two similar CSS classes and switch it with javascript instead of trying to alter a property of a single CSS class. — Jasen
– Jasen, Commented Jan 14, 2014 at 23:26

Niels Keurentjes · Accepted Answer · 2014-01-14 23:27:55Z

1

JS:

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

CSS:

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

Or insert it dynamically with pseudo-elements:

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

answered Jan 14, 2014 at 23:27

Niels Keurentjes

42.1k9 gold badges103 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alex Catchpole Over a year ago

How would I incorporate the third section 'pseudo-elements'

Niels Keurentjes Over a year ago

Start reading here.

Alex Catchpole Over a year ago

Ok i've got the two images to show based on the output of the js. The only problem is that when Adblock is enabled the image shows behind the Adblock is disabled image and isn't in the right place.

Niels Keurentjes Over a year ago

You can put any style you want on the pseudoelement - including position:relative, z-index:1 and top:-50px.

Collectives™ on Stack Overflow

Changing CSS image by JS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related