Change Class Value With Javascript

I want to make a button to change layout from wide to boxed, from class='container' to class='container-fluid', is it possible to change them by Javascript? If yes, how can i do th

Solution 1:

Use document.getElementById("myEle").className to change the class. The classes in below code simply have the background colors. You can put your own css in place of them.

function changeClass(){
  document.getElementById("myEle").className = "container-fluid";
}

<style>
.container{
  background: yellow;
}
.container-fluid{
  background: red;
}
</style>
<div class="container" id="myEle">Hello World</div>
<button onClick="changeClass()">Change class</button>