javascript - 在JavaScript中使用Click addEventListener交换CSS

我在点击事件上无法在页面上正常工作。我有一个ID为“ icon”且其类为“ lock”的Div，并且我希望能够单击此Div的背景图像将类从“ lock”更改为“ locked”。

在发生任何混乱之前，我在外部CSS文件中都有这两个类，并且它们向Div添加了背景图像。另外，我不想使用JQuery，但要使用带有功能的addEventListener。到目前为止，这是我的JS的样子：

var elLock = document.getElementById('icon');
function changeLock(){
    var imgSwitch = elLock.getAttribute('class');
    if(imgSwitch !== 'unlock'){
        elLock.className = 'unlock';

    }else{
        elLock.className('lock');
    }
}

elLock.addEventListener('click', changeLock, false);

所需的结果是此youtube视频中的内容：https://www.youtube.com/watch?v=oI2sRCN7CiM

任何帮助将不胜感激。我很乐于从我犯的错误中学习。

最佳答案

我会使用Element.classList属性，而不是您在这里做的事...

然后，您可以简单地执行以下操作：

elLock.addEventListener('click', function() {
    elLock.classList.toggle('lock') },
    false);

并将unlock保留为元素上的默认类。每次单击该元素，它都会打开和关闭lock类，并且您可以使用CSS的级联属性覆盖默认unlock类上的背景属性。