Beispiel
Legen Sie ein <div> Element nicht angezeigt werden:
document.getElementById("myDIV").style.display = "none"; Versuch es selber " Definition und Verwendung
Die Anzeigeeigenschaftssätze oder gibt den Anzeigetyp des Elements.
Elemente in HTML sind meist "inline" oder "block" Elemente: ein Inline - Element hat schwimmenden Inhalt auf seiner linken und rechten Seite. Ein Blockelement füllt die gesamte Zeile, und nichts kann auf der linken oder der rechten Seite angezeigt.
Das Display Eigenschaft ermöglicht auch den Autor zu zeigen oder ein Element auszublenden. Es ist ähnlich wie die Sichtbarkeit Eigenschaft. Wenn Sie jedoch Anzeige eingestellt: keine, es versteckt sich das gesamte Element, während Sichtbarkeit: versteckt bedeutet, dass der Inhalt des Elements unsichtbar sein wird, aber das Element bleibt in seiner ursprünglichen Position und Größe.
Tip: Wenn ein Element ein Blockelement ist, kann seine Darstellungsart auch mit der Eigenschaft float geändert werden.
Browser-Unterstützung
Die Anzeigeeigenschaft wird in allen gängigen Browsern unterstützt.
Syntax
Bringen Sie die Eigenschaft display:
object .style.display
Stellen Sie die Eigenschaft display:
object .style.display= Eigenschaftswerte Wert Beschreibung block Element als Block-Element gemacht compact Element als Blockebene oder Inline-Element dargestellt. Hängt von Kontext flex Element als Block-flex-Box gerendert. Neu in CSS3 inherit Der Wert der Anzeigeeigenschaft wird aus Mutterelement geerbt inline Element als ein Inline-Element gemacht wird. Dies ist die Standardeinstellung inline-block Element als Blockkasten innerhalb einer Inline-Box gerendert inline-flex Element als Inline-Ebene flex-Box gerendert. Neu in CSS3 inline-table Element wird als Inline-Tabelle wiedergegeben (wie <table>), ohne Zeilenumbruch vor oder nach der Tabelle list-item Element wird als eine Liste gemacht marker Dieser Wert legt Inhalt vor oder nach einem Kasten ein Marker zu sein (verwendet mit: vor und:. Nach pseudo-Elementen Ansonsten dieser Wert ist identisch mit „inline“) none Element wird nicht angezeigt run-in Element als Blockebene oder Inline-Element dargestellt. Hängt von Kontext table Element wird als Block Tabelle wiedergegeben (wie <table>), mit einem Zeilenumbruch vor und nach der Tabelle table-caption Element als Tabellenüberschrift wiedergegeben (wie <caption>) table-cell Element als Tabellenzelle gemacht (wie <td> und <th>) table-column Element wird als eine Spalte von Zellen gemacht (like <col>) table-column-group Element gemacht wird , als eine Gruppe von einer oder mehreren Spalten (like <colgroup>) table-footer-group Element wird als Tabellen Fußzeilenzeile gemacht (like <tfoot>) table-header-group Element wird als Tabellenkopfzeile wiedergegeben (like <thead>) table-row Element als Tabellenzeile gemacht (wie <tr>) table-row-group Element als eine Gruppe von einer oder mehreren Zeilen gemacht (like <tbody>) initial Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfang inherit Erbt diese Eigenschaft von seinem übergeordneten Elemente. Lesen Sie mehr über erben
Technische Details
Standardwert: in der Reihe Rückgabewert: Ein String, die die Art der Anzeige eines Elements CSS Version CSS1
Mehr Beispiele
Beispiel
Der Unterschied zwischen der Anzeigeeigenschaft und der Sichtbarkeit Eigenschaft:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
} Versuch es selber "
Beispiel
Der Unterschied zwischen "inline" , "block" und "none" :
function myFunction(x) {
var whichSelected = x.selectedIndex;
var
sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
} Versuch es selber "
Beispiel
Bringen Sie die Darstellungsart eines <p> Element:
alert(document.getElementById("myP").style.display); Versuch es selber "
Verwandte Seiten
CSS Tutorial: CSS - Anzeige und Sichtbarkeit
CSS - Referenz: display property
<Style - Objekt