Change body of a page with js

Question

What I want is the following, I have a normal body of my html page and I want to click on a button with a certain ID the whole body change to another body using javascript or jquery!

(I know very little about js/jquery, I’m learning little by little)

ØBŘĮĞÅĐŐ

Answer 1

Guy will depend a little on how you set up your CSS as a whole, but you can add a class to body with a new font-family, and with that everything inside will inherit this new font-family of the class added in body

This example is with jQuery, and when you click on BTN he adds the class .fonte in the body with the font-family new.

$( "#btn" ).click(function() {
  $("body").toggleClass("fonte");
  $(this).toggleClass("ativo");
});

body {
  font-family: 'Times New Roman', Times, serif;
}
body.fonte {
  font-family: arial;
}
#btn.ativo {
  background-color: green;
}
#btn {
  background-color: red;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div id="btn">btn</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae quibusdam nostrum, eveniet ullam voluptas blanditiis quos unde pariatur maiores quasi laudantium modi dolorem officia, corporis distinctio doloribus molestias ipsa autem.</p>