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

জাভাস্ক্রিপ্ট দিয়ে এলিমেন্টে ক্লাস নাম যোগ করা


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

উদাহরণ

<!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.add("newStyle");    } </script> </body> </html>

আউটপুট

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

জাভাস্ক্রিপ্ট দিয়ে এলিমেন্টে ক্লাস নাম যোগ করা

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

জাভাস্ক্রিপ্ট দিয়ে এলিমেন্টে ক্লাস নাম যোগ করা


  1. জাভাস্ক্রিপ্ট দিয়ে করেন্ট এলিমেন্টে এক্টিভ ক্লাস যোগ করা

  2. জাভাস্ক্রিপ্ট দিয়ে এলিমেন্ট থেকে ক্লাস নাম মুছে ফেলা

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

  4. জাভাস্ক্রিপ্টে পিউর কোড ব্যবহার করে ভিন্ন li-এ ক্লাস নাম যোগ করা