CSS স্টাইল ব্যবহার করে জাভাস্ক্রিপ্টে HTML এলিমেন্ট হাইড (hide) বা শো (show) করা যায়। CSS block এবং none প্রোপার্টি দিয়ে এলিমেন্ট হাইড/শো করা হয়।
এলিমেন্ট হাইড করা
উদাহরণ
নিচের উদাহরণে "Hideme" বাটনে ক্লিক করলে প্যারাগ্রাফ ট্যাগের টেক্সট অদৃশ্য হয়ে গেছে।
<html> <body> <p id="hide">Using JavaScript to hide HTML elements.</p> <input type="button" onclick="document.getElementById('hide').style.display='none' value="Hideme"> </body> </html>উপরোক্ত কোড এক্সিকিউট করলে নিচের চিত্রটি দেখাবে।
উপরের ব্লকে "Hideme" বাটনে ক্লিক করলে ব্লকের টেক্সট অদৃশ্য হয়ে যাবে, শুধু বাটনটি থাকবে।
আউটপুট
এলিমেন্ট শো করা
উদাহরণ
নিচের উদাহরণে, প্যারাগ্রাফ ট্যাগের টেক্সট প্রাথমিকভাবে লুকানো আছে, কিন্তু "Showme" বাটনে ক্লিক করলে টেক্সট প্রদর্শিত হয়েছে।
<html> <body> <p id="show" style="display:none">JavaScript can show hidden HTML elements</p> <input type="button" onclick="document.getElementById('show').style.display='block'" value="ShowMe"> </body> </html>উপরোক্ত কোড এক্সিকিউট করলে স্ক্রিনে নিচের চিত্রটি দেখাবে।
উপরের বাটনে ক্লিক করলে নিচের আউটপুট আসবে।
আউটপুট
