<h1 id="textHead" class="box">Hello</h1>
<button id="addButton">Add Class</button>
<button id="removeButton">Remove Class</button>
.style {
color: green;
padding: 10px;
}
const boxDiv = document.querySelector("#textHead");
const addButton = document.querySelector("#addButton");
const removeButton = document.querySelector("#removeButton");
addButton.addEventListener("click", function () {
textHead.classList.add("style");
});
removeButton.addEventListener("click", function () {
textHead.classList.remove("style");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.