స్టైల్ డిస్ప్లే అంశం

నిర్వచనం మరియు వినియోగం

display అంశం యొక్క ప్రదర్శన రకాన్ని నిర్ణయించుట లేదా తిరిగి పొందుటకు సంబంధించిన అంశం.

హ్ట్మ్ల్ లోని అంశాలు చాలావరకు 'వరుసాలు' లేదా 'బ్లాక్' అంశాలు: వరుసాల అంశాల కినరికి మరియు కుడికి ఫ్లోటింగ్ కంటెంట్ ఉంటుంది. బ్లాక్ అంశాలు మొత్తం వరుసను నింపుతాయి, అది కినరికి లేదా కుడికి ఏ కంటెంట్ చూపించబడదు.

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 = value

属性值

值 描述
block 元素被渲染为块级元素。
compact కొన్ని పదబంధాలను బ్లాక్ లేదా రాకరాక కొన్ని పదబంధాలగా ప్రదర్శిస్తారు. పరిస్థితి ఆధారంగా.
flex 元素呈现为块级弹性框。CSS3 中的新特性。
inline కొన్ని పదబంధాలను రాకరాక పదబంధంగా ప్రదర్శిస్తారు. అప్రమేయం.
inline-block కొన్ని పదబంధాలను రాకరాక బ్లాక్ బాక్స్ గా ప్రదర్శిస్తారు.
inline-flex కొన్ని పదబంధాలను రాకరాక స్థాయి బలహీన ఫ్లెక్స్ గా ప్రదర్శిస్తారు. CSS3 లో కొత్త లక్షణం.
inline-table కొన్ని పదబంధాలను రాకరాక పట్టికగా ప్రదర్శిస్తారు (ఉదా <table> లో), పట్టిక ముందు మరియు తర్వాత పంక్తు మార్పు లేదు.
list-item కొన్ని పదబంధాలను జాబితాగా ప్రదర్శిస్తారు.
marker

ఈ విలువ మార్కర్ (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
支持 支持 支持 支持 支持