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

জাভাস্ক্রিপ্টে পেজ লোড হওয়ার সাথে সাথে টেক্সট হাইলাইট করার পদ্ধতি


প্রতিবার পেজ লোড হলে টেক্সট হাইলাইট করতে for লুপ এবং নিচের কনসেপ্ট ব্যবহার করতে হয় −

<span class=”yourColorName”>

উদাহরণ

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <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>    .yellow {       color: yellow;    }    .blue {       color: blue;    } </style> </head> <body> <h1 id="pageLoads">My yellow Words,your blue Words</h1> <script>    var ids = document.getElementById("pageLoads");    var loadColorWords = ids.innerHTML.split(" ");    for(var i = 0; i < loadColorWords.length; i++) {       if(loadColorWords[i] == "blue") {          loadColorWords[i] = "<span class='blue'>" + loadColorWords[i] + "</span>";       }       if(loadColorWords[i] == "yellow") {          loadColorWords[i] = "<span class='yellow'>" + loadColorWords[i] + "</span>";       }    }    ids.innerHTML = loadColorWords.join(" "); </script> </body> </html>

উপরোক্ত প্রোগ্রাম চালাতে, ফাইলের নাম anyName.html(index.html) হিসেবে সেভ করুন এবং ফাইলে রাইট-ক্লিক করে VS Code এডিটরে "Open with Live Server" অপশন সিলেক্ট করুন।

আউটপুট

জাভাস্ক্রিপ্টে পেজ লোড হওয়ার সাথে সাথে টেক্সট হাইলাইট করার পদ্ধতি

  1. জাভাস্ক্রিপ্ট দিয়ে HTML পেজের টেক্সট ডিসিলেক্ট করা

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

  3. JavaScript-এ টেক্সট বক্স সিলেক্ট করার পদ্ধতি

  4. জাভাস্ক্রিপ্টে <strong> ট্যাগে টেক্সট সেট করা