ویژگی نمایش Style display

تعریف و استفاده

display تنظیمات ویژگی‌ها یا بازگشت نوع نمایش عنصر.

آر سی ال می‌گوید که عناصر بیشتر به دو نوع “داخل خط” یا “بلاک” تقسیم می‌شوند: عناصر داخل خط در سمت چپ و راست محتوا دارند. عناصر بلاک تمام سطر را پر می‌کنند و در سمت چپ یا راست نمی‌توان محتوایی نشان داد.

display ویژگی نیز به نویسنده اجازه می‌دهد تا عناصر را نمایش یا مخفی کند. این شبیه به ویژگی visibility است. اما اگر تنظیم شود display:none، تمام عنصر را مخفی می‌کند و visibility:hidden این به معنای این است که محتوای عنصر دیده نمی‌شود، اما عنصر به موقعیت و اندازه اولیه خود حفظ می‌شود.

توجه داشته باشید:اگر عنصر یک عنصر بلوک باشد، می‌توانید همچنین از ویژگی float برای تغییر نوع نمایش آن استفاده کنید.

لطفاً به: مراجعه کنید

آموزش CSS:CSS Display و visibility

دستورالعمل CSS:ویژگی display

مثال

مثال 1

تنظیم عدم نمایش عناصر <div>:

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

بازگشتی <p> عنصر کا نمائش نوعیت:

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

نوٹ:

قواعد

بازگشتی display کا مقصد:

عنصر.style.display

دسائیں دیکھئے display کا مقصد:

عنصر.style.display = قیمتی

قیمتی

مقصد کیا
وصف block
عنصر بلاک عنصر نمائش کروائی جاتا ہے。 عنصر ایک بلاک یا این لائن عنصر نمائش کروائی جاتا ہے، یہ اپنے پس منظر پر منحصر ہوتا ہے。
compact flex
inline عنصر این لائن عنصر نمائش کروائی جاتا ہے، یہ دفعاتی طور پر نمائش کروائی جاتا ہے。
inline-block عنصر ایک این لائن بلاک بکس نمائش کروائی جاتا ہے。
inline-flex عنصر ایک این لائن درجہ بندی فلیکس نمائش کروائی جاتا ہے، یہ CSS3 میں ایک نئی خصوصیت ہے。
inline-table عنصر ایک این لائن ٹیبل نمائش کروائی جاتا ہے (مثلاً <table>)، جس کے آغاز اور اختتام پر نیو لائن نمائش نہیں کروائی جاتا ہے。
list-item عنصر ایک فہرست نمائش کروائی جاتا ہے。
marker

اس کا مقصد تھم کے پہلے یا پیچھے کا مطلب نمائش کروائی جاتا ہے。

پس منظر میں :before اور :after ڈرائیورز کے ساتھ استعمال کیا جاتا ہے، درغیر اینٹری اس کا مقصد 'inline' سے مشابہ ہوتا ہے。
none عنصر نمائش نہیں کروائی جاتا ہے。
run-in عنصر ایک بلاک یا این لائن عنصر نمائش کروائی جاتا ہے، یہ اپنے پس منظر پر منحصر ہوتا ہے。
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 ورزن: سی ایس ایس1

براوزر کی حمایت

کروم ایج فائرفاکس سافری آپریا
کروم ایج فائرفاکس سافری آپریا
مقابلہ مقابلہ مقابلہ مقابلہ مقابلہ