display
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Das display
-Attribut ermöglicht es Ihnen, die Darstellung von grafischen oder Container-Elementen zu steuern.
Ein Wert von display="none"
zeigt an, dass das gegebene Element und seine Kinder nicht gerendert werden. Jeder andere Wert außer none
oder inherit
zeigt an, dass das gegebene Element vom Browser gerendert wird.
Wenn das display
-Attribut auf ein Container-Element angewendet wird und auf none
gesetzt ist, führt dies dazu, dass der Container und alle seine Kinder unsichtbar sind; es wirkt also auf Gruppen von Elementen als eine Einheit. Dies bedeutet, dass jedes Kind eines Elements mit display="none"
niemals gerendert wird, selbst wenn das Kind einen anderen display
-Wert als none
hat.
Wenn das display
-Attribut auf none
gesetzt ist, wird das gegebene Element nicht Teil des Rendering-Baums. Das hat Auswirkungen auf die <tspan>
- und <tref>
-Elemente, die Verarbeitung von Ereignissen, die Berechnung des Begrenzungsrahmens und die Berechnung von Clipping-Pfaden:
- Wenn
display
auf einem<tspan>
- oder<tref>
-Element aufnone
gesetzt ist, wird die Textzeichenkette für Layoutzwecke ignoriert. - Bezüglich Ereignissen gilt, dass ein Element keine Ereignisse empfängt, wenn
display
aufnone
gesetzt ist. - Die Geometrie eines grafischen Elements mit
display="none"
wird nicht in die Berechnung des Begrenzungsrahmens und der Clipping-Pfade einbezogen.
Das display
-Attribut beeinflusst nur die direkte Darstellung eines gegebenen Elements, es verhindert jedoch nicht, dass Elemente von anderen Elementen referenziert werden. Zum Beispiel verhindert das Setzen von display="none"
auf einem <path>
-Element, dass dieses Element direkt auf die Leinwand gerendert wird. Allerdings kann das <path>
-Element weiterhin von einem <textPath>
referenziert werden; seine Geometrie wird sogar für die Verarbeitung von Text-auf-einem-Pfad verwendet, selbst wenn das <path>
den display
-Wert none
hat.
Dieses Attribut beeinflusst auch die direkte Darstellung in Offscreen-Canvasen, wie sie bei Masken oder Clip-Pfaden vorkommt. Wenn z.B. display="none"
auf einem Kind eines <mask>
-Elements gesetzt wird, verhindert dies, dass das entsprechende Kindelement als Teil der Maske gerendert wird. Ebenso verhindert das Setzen von display="none"
auf ein Kind eines <clipPath>
-Elements, dass dieses Kindelement zum Clipping-Pfad beiträgt.
Hinweis:
Als Präsentationsattribut hat display
auch ein entsprechendes CSS-Eigenschafts-Pendant: display
. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.
Dieses Attribut kann mit jedem SVG-Element verwendet werden.
Beispiel
<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>
Anwendungsnotizen
Spezifikationen
Specification |
---|
CSS Display Module Level 3 # the-display-properties |
Scalable Vector Graphics (SVG) 2 # VisibilityControl |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
display |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
visibility
-Attribut- CSS
display
-Eigenschaft