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

জাভাস্ক্রিপ্ট দিয়ে নির্দিষ্ট টেক্সট সম্বলিত div হাইড করার পদ্ধতি


প্রথমে getElementsByClassName() ব্যবহার করে div ক্লাস এক্সট্র্যাক্ট করতে হবে এবং for লুপের মাধ্যমে ইটারেট করে OR কন্ডিশন ব্যবহার করে নির্দিষ্ট টেক্সট দেখাতে হবে।

এছাড়া yourDiv.style.display='none' সেট করতে হবে।

উদাহরণ

<!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> </head> <body> <div class="block"> header </div> <div class="block"> content </div> <div class="block"> footer </div> <script>    let attribute = document.getElementsByClassName('block');    for (let i = 0; i < attribute.length; i++) {       let impDiv = attribute[i];       let value = impDiv.innerHTML.trim();       if (value == 'header' || value == 'footer') {          impDiv.style.display = 'none';       }    } </script> </body> </html>

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

আউটপুট

জাভাস্ক্রিপ্ট দিয়ে নির্দিষ্ট টেক্সট সম্বলিত div হাইড করার পদ্ধতি

  1. JavaScript-এ HTML div এলিমেন্টকে টেক্সট এলিমেন্টে রিপ্লেস করার পদ্ধতি

  2. জাভাস্ক্রিপ্টে ডিভ-এ কমা-সেপারেটেড টেক্সটকে আলাদা লাইনে রূপান্তর করা

  3. জাভাস্ক্রিপ্টে নির্বাচিত ডিভে টগল হাইড ক্লাস লাগানো

  4. জাভাস্ক্রিপ্টে HTML এলিমেন্টের স্ক্রিনশট নেওয়া