জাভাস্ক্রিপ্টের সাথে একটি উপাদান থেকে একটি শ্রেণীর নাম যোগ এবং অপসারণের মধ্যে কিভাবে টগল করবেন?

জাভাস্ক্রিপ্টের সাহায্যে একটি উপাদান থেকে একটি শ্রেণির নাম যোগ করা এবং সরানোর মধ্যে টগল করতে, কোডটি নিম্নরূপ -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   .newStyle {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      width: 100%;
      padding: 25px;
      background-color: rgb(147, 80, 255);
      color: white;
      font-size: 25px;
      box-sizing: border-box;
      text-align: center;
   }
</style>
</head>
<body>
<h1>Adding className with JavaScript Example</h1>
<button class="btn">Click here</button>
<h2>Click the above button to add className to below div</h2>
<div id="sampleDiv">
This is a DIV element.
</div>
<script>
   document.querySelector(".btn").addEventListener("click", addClassName);
   function addClassName() {
      var element = document.getElementById("sampleDiv");
      element.classList.toggle("newStyle");
}
</script>
</body>
</html>