স্টাইল ডিসপ্লেই এট্রিবিউট

সংজ্ঞা ও ব্যবহার

display প্রতিযোগী সমায়োজন বা উপাদানের প্রদর্শন ধরন নির্ধারণ করে।

এইচটিএমএল-এর উপাদানগুলি মূলত 'শিরোদ্বার' বা 'বক্তব্য' উপাদান: শিরোদ্বার উপাদানের বাম ও ডানদিকে স্থান থাকে। বক্তব্য উপাদানগুলি একটি সার্টা পূর্ণ করে, তাদের বাম ও ডানদিকে কোনও উপাদান দেখানো যায় না。

display এক্সপ্রোপার্টি একটি লেখককে এলিমেন্টকে দেখা দেওয়া বা লুকিয়ে রাখা করার অনুমতি দেয়। তা অনুরূপ visibility এক্সপ্রোপার্টির সঙ্গে রয়েছে, কিন্তু display:noneএটি সমগ্র এলিমেন্টকে লুকিয়ে দেয়, এবং visibility:hidden মানে এলিমেন্টের কনটেন্ট দেখা যাবে না, কিন্তু এলিমেন্টটি তার প্রাথমিক অবস্থান এবং মাপ টিকে থাকবে。

সুঝানা:যদি এলিমেন্ট ব্লক এলিমেন্ট হয়, float এক্সপ্রোপার্টির মাধ্যমেও তার প্রদর্শন ধরন পরিবর্তন করা যেতে পারে。

অন্যান্য দেখুন:

CSS টিউটোরিয়াল:CSS Display এবং visibility

CSS রেফারেন্স ম্যানুয়েল:display এক্সপ্রোপার্টি

একটি প্রদর্শন

উদাহরণ 1

ডিভ এলিমেন্টকে নিষ্ক্রিয় করা:

document.getElementById("myDIV").style.display = "none";

স্বয়ং প্রয়াস করুন

উদাহরণ 2

display এবং visibility এক্সপ্রোপার্টির পার্থক্য:

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

স্বয়ং প্রয়াস করুন

উদাহরণ 3

এলিমেন্টকে লুকিয়ে এবং দেখানোর মধ্যে ট্রান্সফর করা:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

স্বয়ং প্রয়াস করুন

উদাহরণ 4

"inline"、"block" এবং "none"-এর পার্থক্য:
function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var sel = x.options[whichSelected].text;
  var elem = document.getElementById("mySpan");
  elem.style.display = sel;
}

স্বয়ং প্রয়াস করুন

উদাহরণ 5

পিএল উপাদানের প্রদর্শন ধরন ফলাফল:

alert(document.getElementById("myP").style.display);

স্বয়ং প্রয়াস করুন

সিনট্যাক্স

display বৈশিষ্ট্য ফলাফল:

object.style.display

display বৈশিষ্ট্য সংযোজন:

object.style.display = value

বৈশিষ্ট্য মান

মান বর্ণনা
block উপাদান একটি ব্লক উপাদান হিসাবে প্রদর্শিত হয়。
compact উপাদান একটি ব্লক বা ইনলাইন উপাদান হিসাবে প্রদর্শিত হয়। উপাদান অবস্থান অনুযায়ী।
flex উপাদান একটি ব্লক ফ্লেক্স (flex) উপাদান হিসাবে প্রদর্শিত হয়। CSS3-এর একটি নতুন বৈশিষ্ট্য。
inline উপাদান একটি ইনলাইন উপাদান হিসাবে প্রদর্শিত হয়। ডিফল্ট。
inline-block উপাদান একটি ইনলাইন বক্সের একটি ব্লক বক্স হিসাবে প্রদর্শিত হয়。
inline-flex উপাদান একটি ইনলাইন স্ট্রোক ফ্লেক্স (flex) হিসাবে প্রদর্শিত হয়। CSS3-এর একটি নতুন বৈশিষ্ট্য。
inline-table উপাদান একটি ইনলাইন ট্যাবল (যেমন <table>) হিসাবে প্রদর্শিত হয়।
list-item উপাদান একটি তালিকা হিসাবে প্রদর্শিত হয়。
marker

এই মানটি ট্যাগের আগে এবং পরের কনটেন্টকে ট্যাগ (marker) হিসাবে নিয়ে যাবে

যদি :before এবং :after প্রোটো-উপাদানগুলির সঙ্গে ব্যবহৃত হয় তবে এই মান 'inline' এর সমতুল্য।
none উপাদান প্রদর্শিত হবে না。
run-in উপাদান একটি ব্লক বা ইনলাইন উপাদান হিসাবে প্রদর্শিত হয়। উপাদান অবস্থান অনুযায়ী।
table উপাদান একটি ব্লক ট্যাবল (block table) হিসাবে প্রদর্শিত হয় (যেমন <table>)，ট্যাবলের আগে এবং পরে বানার ট্যাগ।
table-caption উপাদান একটি ট্যাবলেট হেডিং হিসাবে প্রদর্শিত হয় (যেমন <caption>)。
table-cell উপাদান একটি ট্যাবলেট সেল হিসাবে প্রদর্শিত হয় (যেমন <td> এবং <th>)。
table-column উপাদান একটি কোলাম কেলেঙ্কারী হিসাবে প্রদর্শিত হয় (যেমন <col>)。
table-column-group উপাদান একটি একলবন বা একাধিক কলার গোষ্ঠী হিসাবে প্রদর্শিত হয় (যেমন <colgroup>)。
table-footer-group উপাদান একটি ট্যাবলেট ফুটার লাইন হিসাবে প্রদর্শিত হয় (যেমন <tfoot>)。
table-header-group উপাদান একটি ট্যাবলেট হেডার লাইন হিসাবে প্রদর্শিত হয় (যেমন <thead>)。
table-row উপাদান একটি ট্যাবলেট লাইন হিসাবে প্রদর্শিত হয় (যেমন <tr>)。
table-row-group উপাদান একটি একলবন বা একাধিক লবণবন্ধনীর গোষ্ঠী হিসাবে প্রদর্শিত হয় (যেমন <tbody>)。
initial এই বৈশিষ্ট্যটিকে তার ডিফল্ট মানে নিয়ে যান। দেখুন initial。
inherit এই বৈশিষ্ট্যটি তার পিতৃউপাদান থেকে উত্তরাধিকার নেয়। দেখুন inherit。

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: inline
ফলাফল: শব্দসূচক, যা উপাদানের প্রদর্শন ধরনকে নির্দেশ করে。
CSS সংস্করণ: CSS1

ব্রাউজার সমর্থন

চ্রোম এডজ ফায়ারফক্স স্যাফারি অপেরা
চ্রোম এডজ ফায়ারফক্স স্যাফারি অপেরা
সমর্থন সমর্থন সমর্থন সমর্থন সমর্থন