HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" rel="stylesheet"/>
  <title>Demo HTML</title>
  <style>
    body { text-align: center;}
    .elmn1,.elmn2{
      padding: 10px;
      margin:10px auto;
      text-align:left;
      background: white;
      border-radius: 5px;
      position:relative;
      transition: linear 0.4s
    }
    .elmn1{ border: 1px solid green; color: green;padding-bottom:35px}
    .elmn2{ border: 1px solid blue; color: blue;}
    div[class*='elmn'] .fa-lightbulb{ 
      color: white;
      font-size: 30px; margin: 0 20px;
    }
    [align='right'],[onclick*='remove'],.class1 [onclick*='add']{visibility: hidden}
    .class1{ background: lightgreen;}
    .class2{ background: lightblue;}
    div[class*='class']{ box-shadow: 1px 3px 4px #555;}
    div[class*='class'] .fa-lightbulb{ text-shadow:  1px 1px 2px white, 0 0 25px yellow, 0 0 5px red;}
    div[class*='class'] [onclick*='remove']{visibility: visible!important}
    [onclick*='add']{float:left}
    [onclick*='remove']{float:right}
  </style>
</head>
<body>
  <h2 align="center">Add / remove <code>class</code> - DEMO</h2>
  <div class='elmn1'>
    <p>Elemen 1 <i class="fas fa-lightbulb"></i></p>
    <div class='elmn2'>
      <p>Elemen 2 <i class="fas fa-lightbulb"></i></p>
    </div>
   <p><button onclick='addClass()'><i class="fas fa-toggle-on"></i> On</button>
     <button onclick='removeClass()'><i class="fas fa-power-off"></i>  Off</button></p>
  </div>
    <label>*Tekan tombol yang tersedia untuk melihat efeknya.</label>
  <script>//<![CDATA[
    var a = document.querySelector(".elmn1");
    var b = document.querySelector(".elmn2");

function addClass() {
      a.classList.add("class1");
      b.classList.add("class2");
  }
    var a = document.querySelector(".elmn1");
    var b = document.querySelector(".elmn2");

function removeClass() {
      a.classList.remove("class1");
      b.classList.remove("class2");
  }
  //]]></script>
</body>
</html>

Coding Blogger Koleksi Script - (add/remove class)

HTML Demo

Demo script add/remove class