Change Class value With Javascript

Question

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 that?

An event listener, some query selectors and `Element.className` — Jonas Wilms, Jul 19 '18 at 19:18
It is common. try searching toggling between classes. you will find a lot of samples — jmag, Jul 19 '18 at 19:18
`var ctr = document.querySelector('.container'); var classnames = ctr.className; ctr.className = ctr.className.replace('container', 'container-fluid')` — tika, Jul 19 '18 at 19:26

score 2 · Accepted Answer · answered Jul 19 '18 at 19:21

2

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>

answered Jul 19 '18 at 19:21

Hari Das

10,145
7
62
59

It works! Thanks! – Abay Jul 19 '18 at 19:24
1

Mark it as accepted, that would help others. – Hari Das Jul 19 '18 at 19:26
I did. Thanks a lot, – Abay Jul 19 '18 at 23:49

Change Class value With Javascript

1 Answers1

Linked