Question: I have an HTML page with a div and a CSS class attached to it.
I want the class element attached to it, to be replaced with another class when pressed a button.
And most **importantly** I don't want a single line of CSS property to be changed of that class, **I want the entire class to be replaced by another class.**

*Can it be done?*

Sorry if this is already answered, I just couldn't find what I was looking for.
Here's the little code snippet of the HTML and the CSS: 

```css
.class1{
  margin: 20px;
  padding: 20px;
  height: 100px;
  width: 150px;
  color: white;
  background-color: black;
}

.class2{
  margin: 20px;
  padding: 20px;
  height: 100px;
  border-radius: 5px;
  width: 200px;
  color: black;
  background-color: yellow;
}
```

```html
<html>
<body>
 <button>Click</button>
 <div class="class1"><p>Hello Everyone</p></div>
</body>
</html>
```

(i want the class: *class1* to be replaced with *class2* on button click with the help of javascript.)

Answer: 
```js
var btn = document.getElementById('btn');
var box = document.getElementById('box');

btn.addEventListener('click', function() {
  box.classList.remove('class1');
  box.classList.add('class2');
});
```

```css
.class1 {
  margin: 20px;
  padding: 20px;
  height: 100px;
  width: 150px;
  color: white;
  background-color: black;
}

.class2 {
  margin: 20px;
  padding: 20px;
  height: 100px;
  border-radius: 5px;
  width: 200px;
  color: black;
  background-color: yellow;
}
```

```html
<button id="btn">Click</button>
<div id="box" class="class1">
  <p>Hello Everyone</p>
</div>
```
Use `classList` to `remove` and add `classes` from elements.

```js
function a() {
var ele=document.querySelector('#a');
  ele.classList.remove('class1');
  ele.classList.add('class2');
}
```

```css
.class1 {
  margin: 20px;
  padding: 20px;
  height: 100px;
  width: 150px;
  color: white;
  background-color: black;
}

.class2 {
  margin: 20px;
  padding: 20px;
  height: 100px;
  border-radius: 5px;
  width: 200px;
  color: black;
  background-color: yellow;
}
```

```html
<html>

<body>
  <button onclick="a()">Click</button>
  <div id="a" class="class1">
    <p>Hello Everyone</p>
  </div>
</body>

</html>
```