<div id="box">
This is div
</div>
<button id="add-btn">Add class</button>
<button id="remove-btn">Remove class</button>
.shadow{
box-shadow: 2px 1px 2px 2px #ccc;
padding:1rem;
margin:1rem;
}
const div = document.getElementById('box');
const addBtn = document.getElementById('add-btn');
const removeBtn = document.getElementById('remove-btn');
addBtn.addEventListener('click',()=>{
div.classList.add('shadow');
})
removeBtn.addEventListener('click',()=>{
div.classList.remove('shadow');
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.