Style display အကျုပ်

အသုံးပြုခြင်း နှင့် အကျုပ်

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

返回

元素的显示类型：

alert(document.getElementById("myP").style.display);

亲自试一试

语法

返回 display 属性：

object.style.display

display အက်ဥပဒေ ကို သတ်မှတ်ပါ:

object.style.display = အရာဝတ္တု

အက်ဥပဒေ အရာဝတ္တု

အရာဝတ္တု ဖော်ပြ
block အရာဝတ္တု ပြသည်
compact အရာဝတ္တု ပုံစံ ပြသည်။ ပြင်ပလုပ်သုံး သို့မဟုတ် အစဉ်အဆာပြု သုံး။
flex အရာဝတ္တု ပုံစံ ပြသည် (ဥပမာ <table> ကဲ့သို့)၊ အစဉ်အဆာပြု အက်ဥပဒေ တွင် အသစ်ဖော်ပြခြင်း။
inline အရာဝတ္တု ပြသည်။ မူကျ
inline-block အရာဝတ္တု ပြသည် (ဥပမာ <table> ကဲ့သို့)၊ ပုံစံ အနေဖြင့် အဆိုပါ အရာဝတ္တု အတွင်း ပြသည်
inline-flex အရာဝတ္တု ပြသည် (ဥပမာ <table> ကဲ့သို့)၊ အစဉ်အဆာပြု အက်ဥပဒေ တွင် အသစ်ဖော်ပြခြင်း။
inline-table အရာဝတ္တု ပြသည် (ဥပမာ <table> ကဲ့သို့)၊ ပုံစံ အနေဖြင့် လှောင်းလွှားခြင်းမရှိ။
list-item အရာဝတ္တု ပြသည်။
marker

ဤအရာဝတ္တု အမှုထမ်း ပမာ အချက်အလက် အဖြစ် ပြသည်

:before နှင့် :after အကွယ်အဆို အရာဝတ္တု နှင့် အသုံးပြုရမည်။ မဟုတ်ဘဲ ဤအရာဝတ္တု အမှုထမ်း သည် "inline" နှင့်အတူပြုလုပ်သည်။
none အရာဝတ္တု ပြသမည် မဟုတ်။
run-in အရာဝတ္တု ပုံစံ ပြသည်။ ပြင်ပလုပ်သုံး သို့မဟုတ် အစဉ်အဆာပြု သုံး။
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
支持 支持 支持 支持 支持