Question

好吧，也许这是一个有点小错误的愚蠢问题，但是我正在尝试解决这个问题而我不能：

    <style>
 .pagar a {   
 width:  200px;
 height: 85px;
 display: block; 
 background-image: url('imagens/pagar.jpg'); 
 background-repeat: no-repeat;

     } 
.pagar a:hover { 
 background-image: url('imagens/pagar-hover.jpg');
 background-repeat: no-repeat; } 
</style>

    <script>
    function clickado() {
    document.getElementsByClassName('pagar')[0].style.backgroundImage = 'url("imagens/pagar-clickado.jpg")';
    }
    </script>

HTML：

<div class="pagar" id="pagar" ><a href="#" onclick="clickado()"></a></div>

问题：

.style.backgroundImage只是没有更改为＆＃34; imagens / pagar-clickado.jpg＆＃34;，路径是正确的，我没有在控制台中得到错误（＆＃39; pagar＆＃39 ;）[0]也是正确的。

Answer 1

您可以尝试为事件点击添加新的样式类：

 .pagar.click a:hover {
 background-image: url('imagens/pagar-clickado.jpg');
 background-repeat: no-repeat;
 }

并更改函数javascript：

    function clickado() {
    document.getElementById('pagar').classList.add('click');
}

使用新的api来处理类，更容易

Answer 2

我认为你想要定位a内的div.pagar元素。你可以这样做：

HTML

<div class="pagar" ><a href="#" id="pagar" onclick="clickado()"></a></div>

的Javascript

function clickado() {
    document.getElementById('pagar').style.backgroundImage = 'url("imagens/pagar-clickado.jpg")';
}

Answer 3

您可以编写一个更好的解决方案，将带有您的javascript的课程附加到＆＃39; .pagar＆＃39;元素，例如＆＃34;点击＆＃34;。然后你可以在你的CSS中添加几行：

.pagar.clicked a,
.pagar.clicked a:hover {
    background-image: url('imagens/pagar-clickado.jpg');
}

这当然是javascript：

<script>
function clickado() {
document.getElementsByClassName('pagar')[0].className += 'clicked';
}
</script>

我了解到，为了保持代码简单和可持续性，将样式定义移动到CSS（从javascript中删除）通常是最好的做法。

样式背景图像与JS不工作

3 个答案: