সিএসএস visibility প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| visibility | ১.০ | ৪.০ | ১.০ | ১.০ | ৪.০ |
সংজ্ঞা ও ব্যবহার
একটি এলিমেন্ট দৃশ্যমান নাকি অদৃশ্যমান তা visibility প্রোপার্টি নির্ধারণ করে।
পরামর্শঃ
- যদি এলিমেন্ট অদৃশ্যমান হয় তাহলে এটি পেজের জায়গা নিয়ে নেয়। অদৃশ্যমান এলিমেন্ট যাতে কোনো স্পেস নিতে না পারে তার জন্য display প্রোপার্টি ব্যবহার করতে হয়।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| visible | হ্যাঁ | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
visibility: visible/hidden/collapse/initial/inherit;
উদাহরণ
একটি অদৃশ্য <h2> এলিমেন্ট তৈরী করি:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
h1.visible {
visibility: visible
}
h1.hidden {
visibility: hidden
}
</style>
</head>
<body>
<h1 class="visible">এটি একটি দৃশ্যমান হেডিং। </h1>
<h1 class="hidden"> এটি একটি অদৃশ্যমান হেডিং। </h1>
<p> অদৃশ্যমান হেডিং দেখা না গেলেও তার নিজস্ব জায়গা দখল করে নিবে। </p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.visibility="hidden"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#syntax {
margin: auto;
width: 400px;
height: 200px;
background-color: lightblue;
border: 1px solid black;
}
</style>
</head>
<body>
<p> DIV এলিমেন্টের visibility প্রোপার্টি "hidden" নির্ধারণ করে "ক্লিক করি" বাটনে ক্লিক করি:</p>
<button onclick="myFunction()">ক্লিক করি </button>
<div id="syntax"> এটি একটি DIV এলিমেন্ট </div>
<p><strong>নোট</strong>: অদৃশ্যমান এলিমেন্ট অদৃশ্য হওয়ার পরও পেজে জায়গা দখল করে। </>p>
<script>
function myFunction() {
document.getElementById("syntax").style.visibility = "hidden";
}
</script>
</body>
</html>
ফলাফল
আরো উদাহরণ
উদাহরণ
টেবিল কলাপ্স কিভাবে হয় এই উদাহরণে আপনি সেটি দেখতে পাবেন:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
tr.collapse {
visibility: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>কনিকা</td>
<td>চৌধুরী</td>
</tr>
<tr class="collapse">
<td>মতিউর </td>
<td>রহমান </td>
</tr>
</table>
<p><b>নোট:</b> ইন্টারনেট এক্সপ্লোরার ৮ এবং পূর্ববর্তী ভার্সনে visibility:collapse সাপোর্ট করানোর জন্য অবশ্যই
!DOCTYPE নির্দিষ্ট করা থাকতে হবে। </p>
</body>
</html>
ফলাফল
visibility প্রোপার্টির ভ্যালু-সমূহ
- visible - এটি ডিফল্ট ভ্যালু। এই এলিমেন্টটি visible।
- hidden -এই এলিমেন্টটি অদৃশ্যমান। (কিন্তু জায়গা দখল করবে)
- collapse - এটি শুধুমাত্র টেবিল এলিমেন্টের জন্য। collapse একটি সারি অথবা কলাম মুছে দেয়,
কিন্তু এটি টেবিলের গঠনে কোনো প্রভাব ফেলে না। অন্যান্য কন্টেন্টের সারি অথবা কলামে এই স্পেস থাকবে।
যদি কলাপ্স ব্যবহার করা হয় তাহলে এটি অন্য এলিমেন্টে "hidden" হিসেবে থাকবে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
visibility প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।