how to change body class

Question

I want to change the body's class. If I click on the red button then body's class should be bg-red. If I click on the dark button, the class should be bg-dark. using jQuery

CSS

button {
 padding: 10px 30px;
 border: 0;
 text-align: center;
 display:inline-block;
}
.light {
 background-color:#f9f9f9;
 color: #000000;
}
.dark {
 background-color:#000000;
 color: #ffffff;
}
.red {
 background-color:#ff0000;
 color: #ffffff;
}

HTML

<body class="bg-dark">
    <button type="submit" class="light">Light</lbutton>
    <button type="submit" class="dark">Dark</button>
    <button type="submit" class="red">Red</button>
</body>

score 1 · Accepted Answer · answered May 20 '19 at 12:23

$(document).ready(function () {
            $('button').click(function () {
                $("body").removeClass();
                var className = $(this).attr('class');
                $('body').addClass('bg-' + className);
            })
        });

.bg-light {
 background-color:#f9f9f9;
 color: #000000;
}
.bg-dark {
 background-color:#000000;
 color: #ffffff;
}
.bg-red {
 background-color:#ff0000;
 color: #ffffff;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body class="bg-dark">
    <button type="submit" class="light">Light</button>
    <button type="submit" class="dark">Dark</button>
    <button type="submit" class="red">Red</button>
</body>

score 0 · Answer 2 · answered May 20 '19 at 12:22

Try this :

document.getElementById('grayButton').onclick = switchGray;
document.getElementById('whiteButton').onclick = switchWhite;
document.getElementById('blueButton').onclick = switchBlue;
document.getElementById('yellowButton').onclick = switchYellow;

function switchGray() {
  document.getElementsByTagName('body')[0].style.backgroundColor = 'gray'; 
  document.getElementsByTagName('body')[0].style.color = 'white'; 
}

function switchWhite() {
  document.getElementsByTagName('body')[0].style.backgroundColor = 'white'; 
  document.getElementsByTagName('body')[0].style.color = 'black'; 
}

function switchBlue() {
  document.getElementsByTagName('body')[0].style.backgroundColor = 'blue'; 
  document.getElementsByTagName('body')[0].style.color = 'white'; 
}

function switchYellow() {
  document.getElementsByTagName('body')[0].style.backgroundColor = 'yellow'; 
  document.getElementsByTagName('body')[0].style.color = 'black'; 
}

body {
  margin: 3em;
  padding: 0;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

h1 {
  line-height: 1.25;
  margin: 2em 0 0;
}
p {
  margin: .5em 0;
}

#switcher {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#switcher li {
  float: left;
  width: 30px;
  height: 30px;
  margin: 0 15px 15px 0;
  border-radius: 30px;
  border: 3px solid black;
}

#grayButton {
  background: gray;
}
#whiteButton {
  background: white;
}
#blueButton {
  background: blue;
}
#yellowButton {
  background: yellow;
}

<ul id="switcher">
  <li id="grayButton"></li>
  <li id="whiteButton"></li>
  <li id="blueButton"></li>
  <li id="yellowButton"></li>
</ul>

how to change body class

2 Answers2