display

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

display 属性は、グラフィック要素またはコンテナー要素のレンダリングを制御します。

display="none" の値は、指定された要素とその子要素がレンダリングされないことを示します。 none または inherit 以外の値は、指定された要素がブラウザーによってレンダリングされることを示します。

コンテナー要素に適用された場合、display を none に設定すると、コンテナーとそのすべての子要素が不可視となります。つまり、要素のグループに対してグループとして作用します。すなわち、 display="none" を持つ要素の子要素は、たとえその子要素の display 値が none 以外であっても、まったくレンダリングされないということです。

display 属性を none に設定すると、指定された要素はレンダリングツリーに属さなくなります。これは、 <tspan> 要素、 <tref> 要素、イベント処理、境界ボックスの計算、クリッピングパスの計算に影響します。

display が none に設定された <tspan> または <tref> 要素では、テキスト文字列はテキストレイアウトの目的では無視されます。
イベントに関しては、 display が none に設定された場合、その要素はイベントを受け取らなくなります。
グラフィック要素の display を none に設定したときの形状は、境界ボックスやクリッピングパスの計算には含まれません。

display 属性は指定された要素の直接レンダリングにのみ影響し、他の要素から参照されることを防ぐことはできません。例えば、 <path> 要素に none を設定すると、その要素がキャンバスで直接レンダリングされるのを防ぐことができますが、 <path> 要素は引き続き <textPath> 要素から参照することができます。さらに、 <path> に display 属性の値として none が設定されていても、その形状はパス上のテキスト処理で使用することができます。

この属性は、マスクやクリップパスで発生するような、オフスクリーンのキャンバスへの直接レンダリングにも影響します。したがって、 display="none" を <mask> の子要素に設定すると、指定された子要素がマスクの一部としてレンダリングされるのを防ぐことができます。同様に、 display="none" を <clipPath> の子要素に設定すると、指定された子要素がクリッピングパスに寄与するのを防ぐことができます。

メモ: プレゼンテーション属性であるため、 display には対応する CSS プロパティ display があります。両方が指定された場合、 CSS プロパティが優先されます。

この属性は以下の SVG 要素で使用できます。

例

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

html

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