Dasdisplay-Attribut ermöglicht es Ihnen, die Darstellung von grafischen oder Container-Elementen zu steuern.

Ein Wert vondisplay="none" zeigt an, dass das gegebene Element und seine Kinder nicht gerendert werden. Jeder Wert außernone oderinherit zeigt an, dass das gegebene Element vom Browser gerendert wird.

Wenn es auf ein Container-Element angewendet wird, bewirkt das Setzen vondisplay aufnone, dass der Container und alle seine Kinder unsichtbar sind; es wirkt also auf Gruppen von Elementen als Gruppe. Das bedeutet, dass kein Kind eines Elements mitdisplay="none" je gerendert wird, selbst wenn das Kind einen anderen Wert fürdisplay alsnone hat.

Wenn dasdisplay-Attribut aufnone gesetzt ist, wird das gegebene Element nicht Teil des Renderbaums. Dies hat Auswirkungen auf die<tspan>-Elemente, die Ereignisverarbeitung, die Berechnung des Begrenzungsrahmens und die Berechnung von Clipping-Pfaden:

• Wenndisplay bei einem<tspan>-Element aufnone gesetzt ist, wird die Textzeichenfolge für Layoutzwecke ignoriert.
• In Bezug auf Ereignisse: Wenndisplay aufnone gesetzt ist, erhält das Element keine Ereignisse.
• Die Geometrie einesGrafikelements mitdisplay aufnone wird nicht in die Berechnungen von Begrenzungsrahmen und Clipping-Pfaden einbezogen.

Dasdisplay-Attribut beeinflusst nur das direkte Rendering eines gegebenen Elements, verhindert jedoch nicht, dass Elemente von anderen Elementen referenziert werden. Zum Beispiel verhindert das Setzen aufnone bei einem<path>-Element, dass es direkt auf der Leinwand gerendert wird, aber das<path>-Element kann immer noch von einem<textPath>-Element referenziert werden; zudem wird seine Geometrie bei der Text-auf-einem-Pfad-Verarbeitung verwendet, selbst wenn das<path> dendisplay-Wertnone hat.

Dieses Attribut beeinflusst auch das direkte Rendering in Offscreen-Leinwände, wie sie bei Masken oder Clipping-Pfaden auftreten. Das Setzen vondisplay="none" auf ein Kind eines<mask> verhindert, dass das gegebene Kindelement als Teil der Maske gerendert wird. Ebenso verhindert das Setzen vondisplay="none" auf ein Kind eines<clipPath>-Elements, dass das gegebene Kindelement zum Clipping-Pfad beiträgt.

Sie können dieses Attribut mit jedem SVG-Element verwenden.

Beispiel

html,body,svg {  height: 100%;}

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">  <!-- Here the yellow rectangle is displayed -->  <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect>  <rect x="20" y="20" width="60" height="60" fill="yellow"></rect>  <!-- Here the yellow rectangle is not displayed -->  <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect>  <rect    x="140"    y="20"    width="60"    height="60"    fill="yellow"    display="none"></rect></svg>

Verwendungshinweise

Für eine Beschreibung der Werte siehe bitte die CSSdisplay-Eigenschaft.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• visibility-Attribut
• CSSdisplay-Eigenschaft