单击屏幕时添加类

Question

我不知道js，但我试图在单击屏幕的任何点时将类添加到div。我有这个html

<div class="container">
<div class="box"></div>
</div>

当点击屏幕的任何点时，我需要将类添加到容器中。

我试过这个js

<script>
let button = document.querySelector('.container');
button.addEventListener('click', function() {
button.classList.add('.hide');
});
</script>

，但它没有工作，类没有被应用。我做错了什么?

Answer 1

有一个小语法错误:类应该在没有点前缀的情况下被提及:

button.classList.add('hide');

演示

let button = document.querySelector('.container');
button.addEventListener('click', function() {
button.classList.add('hide');
});

.container {
background-color: #ddd;
cursor: pointer;
}
.box {
background-color: #ccf;
margin: 1rem;
}
.hide {
opacity: 0;
transition: opacity .5s ease-in-out;
}

<div class="container">
<br>  
<div class="box">Click anywhere in the grey container to hide it</div>
<br>  
</div>