ویژگی نمایش Style

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

display

عناصر بیشتر HTML

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:

object.style.display

تنظیم ویژگی display:

object.style.display = value

مقدار ویژگی

مقدار توضیح
block عنصر به عنوان یک عنصر بلوکی نمایش داده می‌شود.
compact عنصر به عنوان یک عنصر بلوکی یا درون خطی نمایش داده می‌شود. بستگی به محیط دارد.
flex عنصر به عنوان یک فریم‌بک بلوکی نمایش داده می‌شود. یک ویژگی جدید در CSS3.
inline عنصر به عنوان یک عنصر درون خطی نمایش داده می‌شود. پیش‌فرض.
inline-block عنصر به عنوان یک قاب بلوکی درون خطی نمایش داده می‌شود.
inline-flex عنصر به عنوان یک فریم‌بک درون خطی نمایش داده می‌شود. یک ویژگی جدید در CSS3.
inline-table عنصر به عنوان یک جدول درون خطی (مانند <table>) نمایش داده می‌شود، جدول پیش و پس از آن دارای پاراگراف‌های خالی نیست.
list-item عنصر به عنوان یک لیست نمایش داده می‌شود.
marker

این مقدار محتوای قبل یا بعد از قاب را به نشانگر (marker) تبدیل می‌کند

با استفاده از پseudo-elements :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

پشتیبانی از مرورگر

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی