خصائص عرض Style display

التعريف والاستخدام

display

عناصر HTML غالباً

display خصائص تسمح للمؤلف بعرض العنصر أو إخفاءه. إنها تشبه خاصية visibility. ولكن إذا تم تعيين display:none، سيخفي العنصر كله، و visibility:hidden يعني أن محتوى العنصر غير مرئي، ولكن العنصر سيبقى في موقعه الأصلي وسيكون بنفس الحجم.

نصيحة:إذا كان العنصر عنصرًا مسطحًا، يمكن أيضًا تغيير نوع عرضه من خلال خاصية float.

انظر أيضًا:

دليل CSSCSS 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 يتم عرض العنصر كصندوق سطر يحتوي على صندوق مكعب (block box).
inline-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

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم