خاصية عرض النمط
مثال
قم بتعيين عنصر <div> بحيث لا يتم عرضه:
document.getElementById("myDIV").style.display = "none";
التعريف والاستخدام
تقوم خاصية العرض بتعيين أو إرجاع نوع عرض العنصر.
العناصر في HTML هي في الغالب عناصر "مضمنة" أو "كتلة": يحتوي العنصر المضمن على محتوى عائم على جانبه الأيمن والأيسر. يملأ عنصر الكتلة الخط بأكمله ، ولا يمكن عرض أي شيء على جانبه الأيسر أو الأيمن.
تسمح خاصية العرض أيضًا للمؤلف بإظهار عنصر أو إخفائه. إنه مشابه لخاصية الرؤية . ومع ذلك ، إذا قمت بتعيين display:none، فإنه يخفي العنصر بأكمله ، بينما visibility:hiddenيعني أن محتويات العنصر ستكون غير مرئية ، لكن العنصر يظل في موضعه وحجمه الأصليين.
نصيحة: إذا كان العنصر عبارة عن عنصر كتلة ، فيمكن أيضًا تغيير نوع العرض الخاص به باستخدام خاصية الطفو.
دعم المتصفح
| Property | |||||
|---|---|---|---|---|---|
| display | Yes | Yes | Yes | Yes | Yes |
بناء الجملة
إرجاع خاصية العرض:
object.style.display
قم بتعيين خاصية العرض:
object.style.display = value
قيم الملكية
| Value | Description |
|---|---|
| block | Element is rendered as a block-level element |
| compact | Element is rendered as a block-level or inline element. Depends on context |
| flex | Element is rendered as a block-level flex box. New in CSS3 |
| inline | Element is rendered as an inline element. This is default |
| inline-block | Element is rendered as a block box inside an inline box |
| inline-flex | Element is rendered as a inline-level flex box. New in CSS3 |
| inline-table | Element is rendered as an inline table (like <table>), with no line break before or after the table |
| list-item | Element is rendered as a list |
| marker | This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to "inline") |
| none | Element will not be displayed |
| run-in | Element is rendered as block-level or inline element. Depends on context |
| table | Element is rendered as a block table (like <table>), with a line break before and after the table |
| table-caption | Element is rendered as a table caption (like <caption>) |
| table-cell | Element is rendered as a table cell (like <td> and <th>) |
| table-column | Element is rendered as a column of cells (like <col>) |
| table-column-group | Element is rendered as a group of one or more columns (like <colgroup>) |
| table-footer-group | Element is rendered as a table footer row (like <tfoot>) |
| table-header-group | Element is rendered as a table header row (like <thead>) |
| table-row | Element is rendered as a table row (like <tr>) |
| table-row-group | Element is rendered as a group of one or more rows (like <tbody>) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
تفاصيل تقنية
| القيمة الافتراضية: | في النسق |
|---|---|
| قيمة الإرجاع: | سلسلة ، تمثل نوع عرض العنصر |
| إصدار CSS | CSS1 |
مزيد من الأمثلة
مثال
الفرق بين خاصية العرض وخاصية الرؤية:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
مثال
التبديل بين إخفاء عنصر وإظهاره:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
مثال
الفرق بين "مضمنة" و "كتلة" و "بلا":
function myFunction(x) {
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
}
مثال
قم بإرجاع نوع عرض عنصر <p>:
alert(document.getElementById("myP").style.display);
الصفحات ذات الصلة
برنامج CSS التعليمي: عرض CSS ووضوح الرؤية
مرجع CSS: خاصية العرض
❮ نمط الكائن