Style - Anzeigeeigenschaft
Beispiel
Stellen Sie ein <div>-Element so ein, dass es nicht angezeigt wird:
document.getElementById("myDIV").style.display = "none";
Definition und Verwendung
Die Anzeigeeigenschaft legt den Anzeigetyp des Elements fest oder gibt ihn zurück.
Elemente in HTML sind meistens „Inline“- oder „Block“-Elemente: Ein Inline-Element hat schwebenden Inhalt auf seiner linken und rechten Seite. Ein Blockelement füllt die gesamte Zeile aus, und auf seiner linken oder rechten Seite kann nichts angezeigt werden.
Die Anzeigeeigenschaft ermöglicht es dem Autor auch, ein Element ein- oder auszublenden. Sie ähnelt der Sichtbarkeitseigenschaft . Wenn Sie jedoch festlegen display:none, wird das gesamte Element ausgeblendet, während visibility:hiddenbedeutet, dass der Inhalt des Elements unsichtbar ist, das Element jedoch an seiner ursprünglichen Position und Größe bleibt.
Tipp: Handelt es sich bei einem Element um ein Blockelement, kann dessen Darstellungsart auch mit der Float-Eigenschaft geändert werden.
Browser-Unterstützung
| Property | |||||
|---|---|---|---|---|---|
| display | Yes | Yes | Yes | Yes | Yes |
Syntax
Geben Sie die Anzeigeeigenschaft zurück:
object.style.display
Legen Sie die Anzeigeeigenschaft fest:
object.style.display = value
Eigenschaftswerte
| 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 |
Technische Details
| Standardwert: | im Einklang |
|---|---|
| Rückgabewert: | Ein String, der den Anzeigetyp eines Elements darstellt |
| CSS-Version | CSS1 |
Mehr Beispiele
Beispiel
Unterschied zwischen der Anzeigeeigenschaft und der Sichtbarkeitseigenschaft:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Beispiel
Umschalten zwischen Ausblenden und Anzeigen eines Elements:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
Beispiel
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;
}
Beispiel
Gibt den Anzeigetyp eines <p>-Elements zurück:
alert(document.getElementById("myP").style.display);
Verwandte Seiten
CSS-Tutorial: CSS-Anzeige und -Sichtbarkeit
CSS-Referenz: Anzeigeeigenschaft
❮ Style-Objekt