Replace(change) classes using attr() method

Example replace(change) classes with attr() method with onclick buttons. This method is like a combination of addClass() and removeClass() methods, it can do multiple replace all classes with one or more new classes.

by ITpresent

HTML

<p>example replace classes with attr() method</p>
   <button id="btn1">BUTTON 1</button>
   <button id="btn2">BUTTON 2</button>
   <button id="btn3">BUTTON 3</button>
   <button id="btn4">BUTTON 4 </button>
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
 <br><br><br>  
   
   <a href="https://itpresent.com/web/jquery/jquery_replace_Class.php" target="_blank">Replace(change) classes using attr() method</a>

CSS

p {
font-size: 40px;
}
.a {
font-family: Impact; 
color: blue;
background-color: red;
 }
.b {
font-family: Brush Script MT; 
color:red;
background-color:green;
}
.c {
font-family: MV Boli;
color:white;
background-color:blue;
}
.d {
font-family: Cambria; 
color:yellow;
background-color: maroon;
}

JavaScript

$(document).ready(function() {
  $("#btn1").click(function() {
    $("p").attr("class", "a");
  });
   $("#btn2").click(function() {
    $("p").attr("class", "b");
  });
   $("#btn3").click(function() {
    $("p").attr("class", "c");
  });
   $("#btn4").click(function() {
    $("p").attr("class", "d");
  });
});