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

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

ক্লাস যোগ করতে forEach() এবং classList.add() ব্যবহার করুন।

উদাহরণ

নিচে কোডটি দেওয়া হলো:

<!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title> </head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style>    .demo1 {       color: yellow;    }    .demo2 {       color: skyblue;    } </style> <body> <ul> <li>Javascript</li> <li>MySQL</li> <li>Java</li> <li>MongoDB</li> </ul> </body> <script>    addingClassUsingJavascript();    function addingClassUsingJavascript() {       const all = document.querySelectorAll('li');       all.forEach(function (t, i) {          if (i === 1) {             t.classList.add('demo1');          } else if (i === 2) {             t.classList.add('demo2');          }       });    } </script> </html>

প্রোগ্রামটি চালানোর জন্য, ফাইলটি যেকোনো নাম দিয়ে সংরক্ষণ করুন (যেমন: index.html)। ফাইলে ডান ক্লিক করে VS Code এডিটরে Open with live server অপশনটি নির্বাচন করুন।

আউটপুট

এটি নিচের আউটপুটটি দেবে:

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

  1. জাভাস্ক্রিপ্ট Error name প্রপার্টি

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

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

  4. জাভাস্ক্রিপ্টে আনঅর্ডার্ড লিস্ট (UL)-এ নতুন লাইন যোগ করা