Style display Property

مثال

تعيين <div> عنصر ليتم عرض:

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

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

مجموعات الملكية أو عرض أو إرجاع نوع العرض للعنصر.

عناصر في HTML هي في معظمها "inline" أو "block" عناصر: عنصر مضمنة قد يتحرك المحتوى على الجانب الأيسر والأيمن. وثمة عنصر كتلة يملأ خط كامل، ويمكن عرض أي شيء على الجانب الأيسر أو الأيمن.

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

Tip: إذا كان العنصر هو عنصر كتلة، ويمكن أيضا نوع شاشته أن تتغير مع الخاصية تعويم.

دعم المتصفح

ويدعم خاصية العرض في جميع المتصفحات الرئيسية.

بناء الجملة

إعادة الممتلكات العرض:

object .style.display

تعيين الخاصية العرض:

object .style.display= قيم الممتلكات

القيمة	وصف
block	يتم تقديم العنصر كعنصر على مستوى الكتلة
compact	يتم تقديم عنصر كما على مستوى كتلة أو عنصر المضمنة. يعتمد على السياق
flex	يتم تقديم عنصر على شكل مربع المرن على مستوى الكتلة. الجديد في CSS3
inherit	يتم توريث قيمة العقار العرض من العنصر الأصلي
inline	يتم تقديم العنصر كعنصر المضمنة. هذا هو الافتراضي
inline-block	يتم تقديم عنصر على شكل مربع كتلة داخل مربع مضمنة
inline-flex	يتم تقديم عنصر على شكل مربع المرن على مستوى المضمنة. الجديد في CSS3
inline-table	يتم تقديم عنصر باعتبارها الجدول مضمنة (مثل <table>)، مع عدم وجود خط فاصل قبل أو بعد الجدول
list-item	يتم تقديم عنصر كقائمة
marker	هذه القيمة تحدد المحتوى قبل أو بعد مربع ليكون علامة (تستخدم مع: قبل و: بعد عناصر الزائفة وإلا هذه القيمة هي مماثلة ل"المضمنة")
none	لن يتم عرض عنصر
run-in	يتم تقديم عنصر كما على مستوى الكتلة أو عنصر المضمنة. يعتمد على السياق
table	يتم تقديم عنصر كجدول كتلة (مثل <table>)، مع فاصل أسطر قبل وبعد الجدول
table-caption	يتم تقديم عنصر ك توضيحية الجدول (مثل <شرح>)
table-cell	يتم تقديم عنصر باسم خلية الجدول (مثل <td> و <ال>)
table-column	يتم تقديم عنصر كعمود من الخلايا (like <col>)
table-column-group	يتم تقديم عنصر كمجموعة واحدة أو أكثر من الأعمدة (like <colgroup>)
table-footer-group	يتم تقديم عنصر كصف تذييل الجدول (like <tfoot>)
table-header-group	يتم تقديم عنصر كصف رأس الجدول (like <thead>)
table-row	يتم تقديم عنصر كصف الجدول (مثل <tr>)
table-row-group	يتم تقديم عنصر كمجموعة واحدة أو أكثر من الصفوف (like <tbody>)
initial	تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي
inherit	يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة

تفاصيل تقنية

القيمة الافتراضية:	في النسق
قيمة الإرجاع:	A سلسلة، يمثل نوع عرض عنصر
صفحة CSS	CSS1

مزيد من الأمثلة

مثال

الفرق بين الملكية العرض والممتلكات الرؤية:

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

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

انها محاولة لنفسك »

مثال

الفرق بين "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;
}

انها محاولة لنفسك »