কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্ট দিয়ে ক্লাস নাম টগল করা (যোগ/বিয়োগ)


জাভাস্ক্রিপ্ট ব্যবহার করে একটি এলিমেন্ট থেকে ক্লাস নাম যোগ বা বিয়োগ টগল করার কোড নিচে দেওয়া হলো −

উদাহরণ

<!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>জাভাস্ক্রিপ্ট দিয়ে className টগল করার উদাহরণ</h1> <button class="btn">এখানে ক্লিক করুন</button> <h2>উপরের বাটনে ক্লিক করলে নিচের div-এ className টগল হবে</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>

আউটপুট

উপরের কোড নিচের আউটপুট দেবে −

জাভাস্ক্রিপ্ট দিয়ে ক্লাস নাম টগল করা (যোগ/বিয়োগ)

“এখানে ক্লিক করুন” বাটনে ক্লিক করলে −

জাভাস্ক্রিপ্ট দিয়ে ক্লাস নাম টগল করা (যোগ/বিয়োগ)


  1. জাভাস্ক্রিপ্ট এবং CSS দিয়ে ড্র্যাগেবল HTML এলিমেন্ট তৈরি

  2. জাভাস্ক্রিপ্টে বাটন ক্লিক করলে নাম যোগ ও মুছে ফেলা

  3. জাভাস্ক্রিপ্টে tr ট্যাগ থেকে id বের করে নতুন td-তে দেখানো

  4. CSS এবং জাভাস্ক্রিপ্ট দিয়ে ডার্ক/লাইট মোড টগল করা