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: 
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>
```
**Try this one**

```
   <style>
    .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;
    }
</style>
<script>
    function changeclass() {

        let div = document.getElementsByClassName("class1")[0];

        //or Use by Id

        let div = document.getElementById("class1");
        div.setAttribute("class", "class2");
    }
</script>
<button onclick="changeclass();">Click</button>
<div id="class1" class="class1"><p>Hello Everyone</p></div>

```