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);
}

通过JS更改CSS图像

1 个答案: