javascript - 如何让javascript编辑css文件中的背景图片

Question

我有一个按钮，我想更改当前背景，但无法弄清楚如何让 javascript 知道我的类是什么，用于我在 css 中设置的背景图片。我通过将类更改为标题找到了一种方法，但这并不是我真正想做的。对不起草率的编码。

<script type="text/javascript">
    function ps() {
        var bg = document.getElementsByTagName('headBack')[0];
        bg.style.backgroundImage= 'url(background.jpg)';
    }
</script>
<header class="headBack">

</header>
<div class="slideButtons">

<ul>
    <li class="active">
        <button class="button" onclick="ps()"></button>
    </li>
</ul>

我的CSS

.headBack {

background-image: url(background2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
height: 600px;

}

Answer 1

您需要使用 document.getElementsByClassName 而不是 document.getElementsByTagName 来满足您的要求

 function ps() {
        var bg = document.getElementsByClassName('headBack')[0];
        bg.style.backgroundImage= 'url(background.jpg)';
    }