HTML DOM Style display প্রপার্টি এলিমেন্টের প্রদর্শনের ধরন সেট বা রিটার্ন করতে ব্যবহৃত হয়। এলিমেন্টগুলো অধিকাংশ:block বা inline হয়। display:none ব্যবহার করে এলিমেন্ট লুকানো যেতে পারে।
সিনট্যাক্স
display প্রপার্টি সেট করার জন্য:
object.style.display = value
প্রপার্টি মানগুলি
| মান | বিবরণ |
|---|---|
| inline | এলিমেন্টকে ইনলাইন এলিমেন্ট হিসেবে প্রদর্শন করে (width এবং height প্রপার্টি কাজ করে না)। |
| block | ব্লক এলিমেন্ট নতুন লাইনে প্রদর্শিত হয় এবং পুরো প্রস্থ ধরে। |
| contents | শুধু চাইল্ড এলিমেন্টগুলো প্রদর্শন করে, প্যারেন্ট এলিমেন্টটি অদৃশ্য করে চাইল্ডগুলোকে DOM-এর সরাসরি চাইল্ড বানায়। |
| flex | এলিমেন্টকে ব্লক-লেভেল ফ্লেক্স কন্টেইনার হিসেবে প্রদর্শন করে। |
| grid | এলিমেন্টকে ব্লক-লেভেল গ্রিড কন্টেইনার হিসেবে প্রদর্শন করে। |
| inline-block | ইনলাইনের মতো কিন্তু এখন width এবং height মান প্রয়োগ করা যায়। |
| inline-flex | এলিমেন্টকে ইনলাইন-লেভেল ফ্লেক্স কন্টেইনার হিসেবে প্রদর্শন করে। |
| inline-grid | এলিমেন্টকে ইনলাইন-লেভেল গ্রিড কন্টেইনার হিসেবে প্রদর্শন করে। |
| inline-table | এলিমেন্টকে ইনলাইন-লেভেল টেবিল হিসেবে প্রদর্শন করে। |
| list-item | এলিমেন্টকে <li> এলিমেন্টের মতো আচরণ করায়। |
| run-in | প্রসঙ্গ অনুযায়ী এলিমেন্টকে ব্লক বা ইনলাইন হিসেবে প্রদর্শন করে। |
| table | এলিমেন্টকে <table> এলিমেন্টের মতো আচরণ করায়। |
| table-caption | এলিমেন্টকে <caption> এলিমেন্টের মতো আচরণ করায়। |
| table-column-group | এলিমেন্টকে <colgroup> এলিমেন্টের মতো আচরণ করায়। |
| table-header-group | এলিমেন্টকে <thead> এলিমেন্টের মতো আচরণ করায়। |
| table-footer-group | এলিমেন্টকে <tfoot> এলিমেন্টের মতো আচরণ করায়। |
| table-row-group | এলিমেন্টকে <tbody> এলিমেন্টের মতো আচরণ করায়। |
| table-cell | এলিমেন্টকে <td> এলিমেন্টের মতো আচরণ করায়। |
| table-column | এলিমেন্টকে <col> এলিমেন্টের মতো আচরণ করায়। |
| table-row | এলিমেন্টকে <tr> এলিমেন্টের মতো আচরণ করায়। |
| none | এলিমেন্টটি সম্পূর্ণরূপে সরিয়ে দেয়। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করে। |
| inherit | প্যারেন্ট এলিমেন্ট থেকে প্রপার্টির মান উত্তরাধিকারসূত্রে পায়। |
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
padding: 10px;
background-color: lightblue;
display: flex;
flex-direction: row;
}
#flexSpan {
width: 70px;
background-color: red;
margin: 20px;
padding: 10px;
}
</style>
<script>
function changeDisplay() {
document.getElementById("DIV1").style.display = "block";
document.getElementById("flexSpan").style.display = "block";
document.getElementById("Sample").innerHTML = "ডিভ এবং এর ভেতরের স্প্যান এলিমেন্ট উভয়ের ডিসপ্লে এখন block-এ পরিবর্তন করা হয়েছে";
}
</script>
</head>
<body>
<div id="DIV1">
<span id="flexSpan">WORLD1</span>
<span id="flexSpan">WORLD2</span>
</div>
<p>নিচের বাটনে ক্লিক করে উপরের ডিভ এবং এর ভেতরের এলিমেন্টের ডিসপ্লে প্রপার্টি পরিবর্তন করুন</p>
<button onclick="changeDisplay()">ডিসপ্লে পরিবর্তন করুন</button>
<p id="Sample"></p>
</body>
</html>
আউটপুট
প্রাথমিক অবস্থায় ডিভ ফ্লেক্স কন্টেইনার হিসেবে এবং স্প্যানগুলো ইনলাইন হিসেবে দেখাবে।
"ডিসপ্লে পরিবর্তন করুন" বাটনে ক্লিক করার পর ডিভ এবং স্প্যান দুটোই ব্লক এলিমেন্ট হিসেবে প্রদর্শিত হবে।
