Anfasi Style display

Girmama ko tsohuwar kwararwan ko anfasi suna hawun wakwakiya.

display Girmama ko tsohuwar kwararwan ko anfasi suna hawun wakwakiya.

Anfasi a HTML suna hankwali ko 'yana' ko 'waka' ko 'bukuku': hankwali anfasi suna hawun wakwakiya kwararwan. Bukuku anfasi suna kafin waka, kuma kwararwan ko wakwakiya ko anfasi ko wakwakiya.

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 元素呈现为行内框中的块框（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

ɗanar ɗin ƙarancin

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Ciwcon Ciwcon Ciwcon Ciwcon Ciwcon