Question

我已经看了这么久，以至于让自己感到困惑。我似乎陷入困境并失去了一些东西。我的代码基本上应该具有默认的div背景（gamebg），当你点击其中一个按钮时，div的背景会发生变化。

<style>        
    #gamebg {
        background-color: #00b5d3;
        background-image: url('background_button_1.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        max-width: 950px;
        height: 800px;
        box-sizing: border-box;
        padding: 20px;
    }

    .gamebg1 {
        background-color: #00b5d3;
        background-image: url('background_button_1.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        max-width: 950px;
        height: 800px;
        box-sizing: border-box;
        padding: 20px;
    }

    .gamebg2 {
        background-color: #00b5d3;
        background-image: url('background_button_2.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        max-width: 950px;
        height: 800px;
        box-sizing: border-box;
        padding: 20px;
    }

</style>

<div id="gamebg">

    <a href="#none" onclick="document.getElementById('gamebg').className ='gamebg1'"><img src="background_button_1.png" class="panel-button"></a>
    <a href="#none" onclick="document.getElementById('gamebg').className ='gamebg2'"><img src="background_button_2.png" class="panel-button"></a>

</div>

对我有什么建议吗？

Answer 1

ID具有比类更高的特异性。在您的情况下，#gamebg会覆盖.gamebg1

最好不要在内联JavaScript中添加太多代码。考虑创建一个功能。在函数内部，您将使用attribute函数添加类，使用removeAttribute函数删除ID。

现在在onclick中，您只需要在参数内添加要添加的类的函数。

这是您的解决方案

的JavaScript

function addNewClass(className) {
    var background = document.getElementById('gamebg');
    background.attribute('class', className);
    background.removeAttribute('gamebg');
}

<a href="#none" onclick="addNewClass('gamebg1');"><img src="background_button_1.png" class="panel-button"></a>
<a href="#none" onclick="addNewClass('gamebg2')"><img src="background_button_2.png" class="panel-button"></a>

以下是有关特异性的更多信息

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

这是由于所谓的特异性＆＃34;。在CSS中，id＆＃34; s更具特异性＆＃34;而不是一个类，这就是为什么id的背景颜色属性将始终覆盖类＆＃39; background-property，意味着当绑定到具有该id的节点的类时，background-color属性实际上不会改变。

关于特异性的好视频：

https://www.youtube.com/watch?v=fy07HYm-geM

Div背景更改OnClick

2 个答案: